Comment puis-je ajouter des classes d'éléments dans Owl Carousel 2?

Mon but est de faire un carrousel qui ressemble à ceci:

Comment puis-je ajouter des classes d'éléments dans Owl Carousel 2?

Dans le cas où vous ne savez pas ce que vous êtes en train de regarder, il y a 5 images/articles, mais seulement celui du centre est affichée dans sa taille réelle. Les images à côté du centre de l'un sont plus petits, et les extérieurs encore plus petites.

J'ai atteint ce niveau dans la première version de Owl Carousel, mais il ne supporte pas de boucle, ce qui rend cette conception ridicule (ne peut pas atteindre le côté images...).

Voici comment je l'ai fait:

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')
  }

Juste vous montrer le code pour les 5 éléments, mais j'ai utilisé des si-clauses de le faire fonctionner pour le 3 et le 7. Le active classe est composée de width: 100% et la passive un width: 80%.

Personne ne sait comment obtenir le même résultat en Owl Carousel 2? Je suis en utilisant _items au lieu de $owlItems mais je ne sais pas si c'est correct. Il n'y a pas de afterAction et les événements/rappels ne semblent pas fonctionner comme ils le devraient dans la v2.

OriginalL'auteur | 2015-03-06