jquery Owl Carousel: how to make current slide focused

Question

I am using Owl Image carousel. http://owlgraphic.com/owlcarousel/demos/images.html

it is working fine. i want to make current slide Little bit Bigger in size than other slide. in other words i want to make current slide's width bigger.

to make current slide Bigger i have added following code:

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

here i have added Active class to Active slides. i tried to zoom Current Slide.

for that i have added following style sheet code.

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

}

But when carousel Scroll second Item Doesn't stay Highlighted. need help to Zoom the Current slide in Owl Carousel.

is there any other Responsive Carousel that Zoom the Current Slider? enter image description here

You are showing 4 slides at a time so how can you detect middle one? also hint:- you need to change width and height of that image — Just code
how can i change the hieght of that image. as carousel will scroll the Current slide item will change. so current slide item should be zoom With Transform:scale(2.2) — Jack Torris

dm4web dm4web · Accepted Answer · 2014-11-28T10:24:13

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: how to make current slide focused

1 Answers