猫头鹰猫头鹰旋转木马: how to make current slide focused

我正在使用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);

}

但是当旋转木马滚动第二个元素时不会保持突出显示状态。需要帮助来缩放“猫头鹰轮播”中的“当前”幻灯片。

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

最佳答案

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,

            })
        }

    });

})