Как добавить классы к элементам в 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 элементов, но я использовал некоторые условия if, чтобы он работал и для 3 и 7. active класс просто состоит из width: 100% и passive один width: 80%,

Кто-нибудь знает, как получить такой же результат в Owl Carousel 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');
    });
}); 

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

Список доступных событий здесь

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

LIVE DEMO

---

НОТА:

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

Answer 2

Добавьте это в ваш файл CSS и JS.

.owl-carousel.owl-drag .owl-item.center .item {
    background: rgb(25, 0, 255) ;
    transform: scale(1.1)
  }


$(document).ready(function () {

$(".owl-carousel").owlCarousel({
    center: true,
    dots: false,
    loop:true,
    responsive: {
        1900: {
            items: 7
        },
        1440: {
            items: 5
        },
        760: {
            items: 3
        },
        0: {
            items: 1
        }
    }
});

});