Wie füge ich den Elementen in Owl Carousel 2 Klassen hinzu?

Question

Mein Ziel ist es, ein Karussell zu machen, die wie folgt aussieht:

Sie nicht wissen,

Falls, was Sie suchen auf, gibt es 5 Bilder/Einzelteile aber nur eine der Mittelpunkt angezeigt wird in seiner vollen Größe. Die Bilder neben dem mittleren sind kleiner und die äußeren kleiner.

Ich habe dies in der ersten Version von Owl Carousel erreicht, aber es unterstützt keine Schleifen, was dieses Design lächerlich macht (kann die Seitenbilder nicht erreichen ...).

Hier ist, wie ich es tat:

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

Nur Sie den Code für 5 Einzelteile zeigt, aber ich habe einige if-Klauseln für 3 und 7 als auch zum Laufen zu bringen. Die active Klasse besteht nur aus width: 100% und passive ein width: 80%.

Kann jemand das gleiche Ergebnis in Owl Carousel 2 erhalten? Ich benutze _items anstelle von $owlItems, aber ich weiß nicht, ob das korrekt ist. Es gibt keine afterAction und die Ereignisse/Callbacks scheinen in v2 nicht so zu funktionieren, wie sie sollten.

Answer 1

Sie können es auf diese Weise tun:

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

Anhören der Veranstaltung Ihrer Wahl

List of available events here

In der Demo, ich fügen Sie einfach die Klasse große zu Hauptsache und die Klasse Medium zum vorherigen und nächsten. Davon können Sie mit der gewünschten CSS-Eigenschaft spielen.

LIVE DEMO

---

HINWEIS:

Sie könnten auch mit Plug-Klassen nur spielen, .active und .center (oder Sie können auch eigene definieren, wie Sie hier sehen können: custom classes