jquery Owl Carousel: как сделать текущий слайд сфокусированным

Я использую карусель 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: nth - child(2) {
    transform: scale(1.2);

}

Но когда карусель прокручивает второй элемент, не остается выделенным. нужна помощь, чтобы увеличить текущий слайд в Owl Carousel.

есть ли другая адаптивная карусель для масштабирования текущего ползунка? введите здесь описание изображения


slider carousel jquery css jquery-plugins
person Jack Torris    schedule 30.06.2014    source источник
comment
Вы показываете 4 слайда за раз, так как же определить средний? также подсказка: - вам нужно изменить ширину и высоту этого изображения   -  person Just code    schedule 01.07.2014
comment
как я могу изменить высоту этого изображения. по мере того, как карусель будет прокручиваться, элемент текущего слайда изменится. поэтому текущий элемент слайда должен быть увеличен с помощью Transform: scale (2.2)   -  person Jack Torris    schedule 01.07.2014
comment
ты понял это? У меня такая же проблема.   -  person nu everest    schedule 02.10.2014
comment
пожалуйста, посмотрите мой ответ   -  person dm4web    schedule 28.11.2014

Ответы (1)


arrow_upward
4
arrow_downward

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,

            })
        }

    });

})
person dm4web    schedule 28.11.2014