Karussell 2 Rendern, wenn die Auflösung geändert wird

Question

Ich arbeite an Responsive Galerie. Ich muss die Anzahl der angezeigten Bilder abhängig von der Auflösung ändern. Zum Beispiel, wenn kleiner als 728px ich nur ein Bild anzeigen muss, aber wenn größer drei. Ich benutze Eulenkarussell 2 Skript, so unten ist ein Beispiel für die Initialisierung für Specyfic div. Wie Sie sehen können, setze ich Parameter "Elemente" auf 3 und scheint gut, aber wenn der Bildschirm kleiner ist, muss ich es auf 1 setzen
so meine Frage ist - wie Parameter in Karussell dynamisch ändern, wenn bereits gerendert?

$ ("my-Galerie.") OwlCarousel ({ Artikel: 3, });.

> this picture shows what i want <

Answer 1

Per documentation, sollten Sie replace.owl.carousel ein vorhandenes Karussell reinit.

Was ich tue, ist unten:

1. Auf window.load Ereignis, das ich ein benutzerdefiniertes Objekt in Fenstern erstellen (myOO = myOwlObject), wo ich sparen, wenn ich auf einem breiten Bildschirm bin oder nicht. Ich benutze es auch, um einige Params im gesamten Skript zu speichern, damit Sie sie leicht ändern können.
2. Basierend auf dem breiten/schmalen Zustand initialisiere ich carousel entweder mit 1 oder 3 Elementen.
3. Auf window.resize Ereignis Ich überprüfe, ob ich im gleichen Intervall (breit/schmal) wie die gespeicherte in isWide bin. Wenn ich in einem anderen Intervall bin, ersetze ich das Karussell und speichere das neue Intervall in isWide.

$(window).on('load', function(){ 
    window.myOO = { 
    breakpoint: 600 
    isWide: $(window).width() > this.breakpoint, 
    options: this.isWide ? {items:3} : {items:1} 
    }; 
    $(".my-gallery").owlCarousel(window.myOO.options); 
}) 
$(window).on('resize', function(){ 
    var shouldReinit = ($(window).width() > window.myOO.breakpoint) !== window.myOO.isWide; 
    if (shouldReinit) { 
    if ($(window).width() > window.myOO.breakpoint) { 
     $(".my-gallery").trigger('replace.owl.carousel', [{items: 3}]); 
    } else { 
     $(".my-gallery").trigger('replace.owl.carousel', [{items: 1}]); 
    } 
    window.myOO.isWide = $(window).width() > window.myOO.breakpoint; 
    } 
})