Ich habe einen Responsive-Image-Slider mit jQuery-Zyklus erstellt.
Das folgende Setup, das ich verwendet habe, funktioniert einwandfrei, abgesehen von dem Inhalt, der .cycle div enthält, wird nicht korrekt gelöscht, was dazu führt, dass alle Inhalte darunter liegen.
Das liegt daran, dass div relativ ist und seine Kinder absolut sind.
%Vor% Meine Frage ist, wie kann ich das responsive .cycle div löschen, ohne eine feste Höhe zu haben oder ereignisreiches JavaScript zu verwenden?
Hier ist mein Code auf jsfiddle: Ссылка
Aktualisierung:
Ich habe einen Code geschrieben, um die Höhe des Zyklus zu fixieren, der wie erwartet funktioniert (obwohl er manchmal ausfällt), aber sein Ereignis ist schwer und nicht sehr glatt.
Ich liebe es zu sehen, kann in reinem CSS oder einer Änderung in der Zyklus-Setup durchgeführt werden.
Alte Post, ich weiß.
Wir arbeiten in der Produktion mit dem Zyklus . Cycle2 war und ist für uns keine Option. Leider müssen die internen Daten des Zyklus geändert werden. Zum Glück ist das Problem einfach.
Wenn das Zyklus-Plug-in initialisiert wird, fügt es jedem DOM-Objekt Ihrer Objektträger zwei Eigenschaften cycleW und cycleH hinzu, jeweils mit der anfänglichen Breite und Höhe der einzelnen Folien. Cycle verwendet diese Eigenschaften, um jede Folie unabhängig von der Dimension des Fensters zu animieren.
Wenn das Fenster in der Größe geändert wird, müssen Sie cycleW und cycleH manuell löschen oder sie auf einen vorher festgelegten Wert setzen .
Beispiel (Angenommen, Ihr Diashow-Container ist .slideshow):
%Vor%Wir haben es in der Produktion sehr gut funktioniert.
html sieht so aus:
%Vor%Jetzt die Fenstergröße ändern. Das ist unsere Version. Möglicherweise müssen Sie dies an Ihre Bedürfnisse anpassen. Grundsätzlich speichern wir das Anfangsverhältnis für die Fälle, in denen wir Bilder in der Diashow fixiert haben. Es gibt Zeiten, in denen wir Slideshows mit variabler Höhe haben. Dieser Code spricht beide Situationen an. Dann werden die internen Werte für cycleW und cycleH jedes Folien-DOM-Elements zurückgesetzt, damit sie in ihren übergeordneten Container passen
%Vor%Standardmäßig weist das Plugin position: relativ zu Ihrer und auch zu s innerhalb der Position zu: absolute und z-index Werte. Das macht die Slideshow zu einem Floater in einem Stapel. Ich habe 2 Lösungen für dieses Problem gefunden:
Fügen Sie Ihrer Klasse die clearfix-Klasse hinzu und fügen Sie css-Stile für clearfix in Ihr Stylesheet ein.
.clearfix: nach { Inhalt: "."; Bildschirmsperre; Lösche beide; Sichtbarkeit: versteckt; Zeilenhöhe: 0; Höhe: 0; }
.clearfix { Anzeige: Inline-Block; }
html [xmlns] .clearfix { Bildschirmsperre; }
(Nicht sehr elegant) fügen Sie Ihrer Zyklusklasse einen Rahmen hinzu
.cycle {Rahmen: 1px solid # f00; }
Hoffen Sie, dass eine davon hilft.
Tags und Links jquery css jquery-plugins clear jquery-cycle