jquery Owl Carousel:如何使当前幻灯片集中

Posted

技术标签:

【中文标题】jquery Owl Carousel:如何使当前幻灯片集中【英文标题】:jquery Owl Carousel: how to make current slide focused 【发布时间】:2014-08-20 18:06:16 【问题描述】:

我正在使用 Owl Image 轮播。 http://owlgraphic.com/owlcarousel/demos/images.html

它工作正常。我想让当前幻灯片比其他幻灯片大一点。 换句话说,我想让当前幻灯片的宽度更大。

为了使当前幻灯片更大,我添加了以下代码:

$(document).ready(function () 
    $("#owl-demo").owlCarousel(
        autoPlay: 3000,
        responsive: true,
        addClassActive: true,
        items: 4,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [979, 3],
    );
);

在这里,我已将 Active 类添加到 Active 幻灯片中。我试图放大当前幻灯片。

为此,我添加了以下样式表代码。

.active: nth - child(2) 
    transform: scale(1.2);


但是当轮播滚动第二个项目不保持突出显示。需要帮助来缩放 Owl Carousel 中的当前幻灯片。

还有其他可以缩放当前滑块的响应式轮播吗?

【问题讨论】:

您一次显示 4 张幻灯片,那么如何检测中间的一张?还提示:- 您需要更改该图像的宽度和高度 如何更改该图像的高度。由于轮播将滚动当前幻灯片项将更改。所以当前的幻灯片项目应该是 zoom With Transform:scale(2.2) 你发现了吗?我也面临同样的挑战。 请看我的回答 【参考方案1】:

http://jsfiddle.net/gjgmqznq/3/

$(document).ready(function () 

    $("#owl-demo").owlCarousel(

        autoPlay: 3000, //Set AutoPlay to 3 seconds
        responsive: true,
        addClassActive: true,
        items: 4,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [979, 3],
        stopOnHover:true,
        afterMove:function()
            //reset transform for all item
            $(".owl-item").css(
                transform:"none"
            )
            //add transform for 2nd active slide
            $(".active").eq(1).css(
                transform:"scale(1.9)",
                zIndex:3000,

            )

        ,
        //set init transform
        afterInit:function()
            $(".active").eq(1).css(
                transform:"scale(1.9)",
                zIndex:3000,

            )
        

    );

)

【讨论】:

以上是关于jquery Owl Carousel:如何使当前幻灯片集中的主要内容,如果未能解决你的问题,请参考以下文章

jQuery幻灯片插件OWL Carousel

jQuery Owl Carousel:无法读取未定义的属性“克隆”

有没有办法改变owl-carousel的光标? (不是 owl-dots 或 owl-nav)

owl.carousel

如何将 Owl Carousel 中的图像居中

如何在 Owl carousel 中显示多个项目?