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

Използвам Owl Image carousel. 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