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?

Solution

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,

            })
        }

    });

})