slick slider - css Übergang Endlosschleife Bug
Ich habe einen Schieberegler mit Slick-Schieberegler eingerichtet. Wenn Sie die nächste und vorherige Taste verwenden, wird das Element mit einem schönen Übergang angezeigt. Das Problem, das ich habe, ist, dass, wenn es seinen Zyklus neu startet, der erste Gegenstand in den Blick "schnappt", anstatt den Übergang zu machen. Außerdem scheint es, als ob es seine interne Indexierung verliert, da die css "ungeraden" und "geraden" Klassen geändert werden. Siehe Ausschnitt unten:
Ich denke, ich weiß, warum es so ist, weil es "geklonte" Elemente erstellen muss, damit die Endlosschleife funktionieren kann. Ich habe ein paar verschiedene Slider-Plugins ausprobiert und sie scheinen alle ähnliche Probleme zu haben.
Weiß jemand, wie ich das beheben kann? Hier geht's zum Ссылка
4 Antworten
Lösung 1 - Verwenden Sie Flickity
Wenn Sie ein anderes Karussell-Steuerelement ausprobieren möchten, können Sie sich Flickity ansehen. Gemäß meinen Tests mit der Option wrapAround "wird" das erste Element nicht in Position zurückversetzt, wenn der vollständige Zyklus abgeschlossen ist. Der Übergang verläuft reibungslos. Sie können es bei der Arbeit in this jsfiddle sehen.
Was das Problem mit der Formatierung der Elemente nach ihrem geraden / ungeraden Index betrifft, geschieht dies nur, wenn Sie eine ungerade Anzahl von Elementen haben. Eine Lösung wäre, die Liste der Elemente zu duplizieren. Intead von
%Vor%Sie könnten
definieren %Vor%Das würde sicherstellen, dass Sie mit einer geraden Anzahl von Elementen arbeiten.
Lösung 2 - Slick Slider: Übergangsverzögerung hinzufügen
Mit dem Slick Slider hilft das Hinzufügen einer Verzögerung beim Übergang, um es beim Abschluss des Zyklus glatter zu machen. Im folgenden Codefragment ersetzte ich:
%Vor%mit
%Vor%
@GSTAR, Schließlich gibt es keinen Fehler in Ihrem Code, aber es gibt Bit CSS und JS-Flow, die Sie verstehen müssen, während Sie slick verwenden.
Slick klont Ihre Folien und ändert diese von oben nach unten. wie unten beschrieben.
%Vor%Ihr Code vor der Slick-Implementierung
%Vor%Ihr Code nach der Slick-Implementierung
Auch nach dem Hinzufügen funktioniert Ihr animation Code gut. aber es kann nicht visuell sichtbar sein. Wenn Sie diese animation -Zeit erhöhen, wird Ihr Browser nicht snaps .
Wenn Sie JavaScript-Code ersetzen, werden Sie wissen, was passiert.
%Vor%Also, nachdem die Schleife beendet ist und bis zur ersten ausgeführten Slide-Animation reicht und bevor sie fertig ist.
Bitte überprüfen Sie unten mein Schnipsel.
In der Endlosschleife haben Sie die Benutzer odd und even css, so dass Ihre nächste first Folie (geklonte Folie) eine grüne Farbe hat, aber Ihre ursprüngliche Folie (erste Folie) hat eine rote Farbe, daher flickert sie Farbe auch. Wenn Sie die Anzahl der Folien in %2 verwenden, wird dies nicht passieren.
Ich hoffe, es wird Ihnen helfen, besser zu verstehen.
Dies ist kein Problem, es ist ein Feature - so funktioniert der Slick-Schieberegler (und die meisten anderen Endlos-Loop-Schieberegler). Grundsätzlich, wenn der Slider nur divs klonen würde, würde dies zu einem großen Performance-Problem führen, also an bestimmten Stellen (Anfang / Ende) nach der Animation das Ganze neu beginnen lassen.
Wenn Sie hier interessiert sind, ist ein Proof-of-Concept des Sliders, der auf dem Übergang basiert und nichts klont, nur die Position ändert. Vielleicht gibt es auch die Möglichkeit, das gleiche mit order zu erreichen - habe es noch nicht versucht, aber jetzt darüber nachgedacht.
Ссылка - natürlich erfordert es viel Arbeit, um es vollständig nutzbar zu machen, aber ich habe versucht, es reaktionsfähig zu machen und dem Beispiel am ähnlichsten. Sie müssen nur den Index verfolgen, um bestimmte Klassen hinzuzufügen / zu entfernen (zB .current ).
@Maciej Kwas
Es könnte ein Feature sein, aber auf dieser Seite, wenn Sie auf den Schieberegler mit "Center Mode" schauen, funktioniert es gut, die Animation sieht OK aus, wenn Sie von der letzten zur ersten Folie gleiten. Ссылка
Tags und Links jquery css slick-slider