Come si aggiungono le classi agli oggetti in Owl Carousel 2?

Question

Il mio obiettivo è quello di fare un carosello che assomiglia a questo:

Nel caso in cui non si sa cosa si sta guardando, ci sono 5 immagini/articoli, ma viene visualizzato solo quello centrale nella sua dimensione completa. Le immagini accanto a quella centrale sono più piccole e quelle esterne più piccole.

Ho ottenuto questo risultato nella prima versione di Owl Carousel ma non supporta il looping, il che rende ridicolo questo disegno (non è possibile raggiungere le immagini laterali ...).

Ecco come ho fatto:

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

Basta che vi mostra il codice per 5 voci, ma ho usato qualche se-clausole per farlo funzionare per 3 e 7 pure. La classe active è composta solo da width: 100% e dallo passive uno width: 80%.

Qualcuno sa come ottenere lo stesso risultato in Owl Carousel 2? Sto usando _items invece di $owlItems ma non so se è corretto. Non c'è afterAction e gli eventi/callback non sembrano funzionare come dovrebbero nella v2.

Answer 1

si può fare in questo modo:

$(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'); 
    }); 
}); 

Ascoltando l'evento di vostra scelta

List of available events here

Nella demo, ho solo aggiungere la classe grande alla voce principale e la classe media alla precedente e successiva. Da questo puoi giocare con qualsiasi proprietà CSS che desideri.

LIVE DEMO

---

NOTA:

Si potrebbe semplicemente giocare anche con le classi del plugin, .active e .center (o si può anche definire il proprio, come si può vedere qui: custom classes