Как добавить классы к элементам в Owl Carousel 2?

Question

Моя цель состоит в том, чтобы сделать карусель, которая выглядит следующим образом:

В случае, если вы не знаете, что вы смотрите, есть 5 изображений/элементы, но отображается только центр один в полном объеме. Изображения, расположенные рядом с центром, меньше, а внешние меньше.

Я достиг этого в первой версии Owl Carousel, но он не поддерживает цикл, что делает этот дизайн смешным (не может достигать боковых изображений ...).

Вот как я это сделал:

var owl = $("#owl-demo"); 

owl.owlCarousel({ 
pagination: false, 
lazyLoad: true, 
itemsCustom: [ 
    [0, 3], 
    [900, 5], 
    [1400, 7], 
], 
afterAction: function(el){ 

.$owlItems 
    .removeClass('active') //what I call the center class 
    .removeClass('passive') //what I call the next-to-center class 

    this 
    .$owlItems 

    .eq(this.currentItem + 2) //+ 2 is the center with 5 items 
    .addClass('active') 

    this 
    .$owlItems 

    .eq(this.currentItem + 1) 
    .addClass('passive') 

    this 
    .$owlItems 

    .eq(this.currentItem + 3) 
    .addClass('passive') 
    } 

Просто показать вам код на 5 пунктов, но я использовал некоторые, если-пункты, чтобы заставить его работать на 3 и 7, а также. Класс active состоит только из width: 100% и passive один width: 80%.

Кто-нибудь знает, как получить тот же результат в Сова Карусель 2? Я использую _items вместо $owlItems, но я не знаю, правильно ли это. Нет afterAction, и события/обратные вызовы не работают так, как должны в v2.

Answer 1

Вы можете сделать это следующим образом:

$(function(){ 
    $('.loop').owlCarousel({ 
     center: true, 
     items:5, 
     loop:true, 
     margin:10 
    }); 

    $('.loop').on('translate.owl.carousel', function(e){ 
     idx = e.item.index; 
     $('.owl-item.big').removeClass('big'); 
     $('.owl-item.medium').removeClass('medium'); 
     $('.owl-item').eq(idx).addClass('big'); 
     $('.owl-item').eq(idx-1).addClass('medium'); 
     $('.owl-item').eq(idx+1).addClass('medium'); 
    }); 
}); 

Прослушивание события по вашему выбору

List of available events here

В демо, я просто добавить класс большой к главному пункту , а класс средний - предыдущий и следующий. Из этого вы можете играть в зависимости от того, какое свойство css вы хотите.

LIVE DEMO

---

Примечание:

Вы также можете просто играть с классами плагинов, .active и .center (или вы можете также определить свои собственные, как вы можете увидеть здесь: custom classes