JQuery Owl Carousel: How to Make the Current Slide Focused

Question

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

works fine. I want to make the current slide A little bit larger than the other slide. in other words, I want to increase the width of the slide.

To make the current Bigger slide, I added the following code:

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

here I added an active class for active slides. I tried to enlarge the current slide.

To do this, I added the following stylesheet code.

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

}

But when the carousel scrolls the second element Does not remain selected. I need help to increase the current slide in the owl carousel.

is there any other responsive carousel that changes the current slider?

Answer 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,

            })
        }

    });

})