Mittlerweile sollte jeder Artikel über Karussells mit dem Haftungsausschluss beginnen: _Sie brauchen vielleicht kein Karussell._ Karussells werden leicht missbraucht. Kyle Peatt hat mehr Details zur Karussell-Kontroverse.
Ein Teil der Schuld kann der Benutzererfahrung von Karussell-Plugins selbst zugeschrieben werden. Das Scrollen durch ein Karussell ist weniger befriedigend und umständlicher als das einfache Scrollen einer Seite nach unten. Grundsätzlich kann man nicht durch sie hindurchwischen. Drittanbieter-Bibliotheken sollten zumindest so nützlich sein wie das native Verhalten.
Zusätzlich zur Benutzerunfreundlichkeit weisen die meisten Karussell-Plugins viele entwicklerunfreundliche Schwachstellen auf. Da sie mit JavaScript konfiguriert werden, ist es oft schwierig, die Konfiguration für andere Breakpoints zu ändern. Diese Karussell-Bibliotheken können Entwickler daran hindern, responsiv zu gestalten.
Ich habe Flickity entwickelt, um beide Probleme zu lösen. Für Ihre Benutzer machen Flickitys Karussells Spaß zum Durchwischen. Flickity verwendet physikbasierte Animationen, sodass Ziehen und Wischen sich natürlich anfühlt. Für Sie sind Flickitys Karussells einfach zu implementieren. Flickity ist flexibel konzipiert und ermöglicht es Ihnen, Ihr eigenes CSS zu nutzen, um Ihre Karussells responsiv zu gestalten.
Flickity verwenden
Um Flickity zu verwenden, fügen Sie zuerst seine .css und .js Dateien zu Ihrer Seite oder Asset-Pipeline hinzu.
<head>
<!-- other head stuff... -->
<link rel="stylesheet" href="/path/to/flickity.css" media="screen">
</head>
<body>
<!-- all your great html... -->
<script src="/path/to/flickity.pkgd.min.js"></script>
</body>Flickity funktioniert mit einem Container-Karussell oder Galerieelement mit einer Gruppe von Zellenlementen.
<div class="main-gallery">
<div class="gallery-cell">...</div>
<div class="gallery-cell">...</div>
<div class="gallery-cell">...</div>
...
</div>Sie können Flickity auf verschiedene Arten initialisieren. Sie können Flickity als jQuery-Plugin verwenden: $('selector').flickity().
$('.main-gallery').flickity({
// options
cellAlign: 'left',
contain: true
});Sie können Flickity mit Vanilla JS verwenden
var flkty = new Flickity( '.main-gallery', {
// options
cellAlign: 'left',
contain: true
});Sie können Flickity bequem in HTML initialisieren, ohne JavaScript schreiben zu müssen. Fügen Sie js-flickity zur Klasse des Galerieelements hinzu. Optionen können mit einem data-flickity-options Attribut in JSON gesetzt werden. Ich empfehle die Initialisierung mit HTML, wenn Sie keinen zusätzlichen Verhalten mit JS hinzufügen.
<div class="main-gallery js-flickity"
data-flickity-options='{ "cellAlign": "left", "contain": true }'>Flickity stylen
Sie können Zellen mit Ihrem eigenen CSS nach Belieben dimensionieren und stylen. Flickity stellt ein Container-Element bereit, damit Zellen mit prozentualen Breiten dimensioniert werden können — keine Größenkonfiguration in JS, nur normale % Werte, die Sie gewohnt sind. Die Höhe der Galerie wird auf die maximale Höhe der Zellen gesetzt.
Siehe den Pen Flickity – volle Breite Zellen von David DeSandro (@desandro) auf CodePen.
(Da die eingebetteten Pens in iframes sind, können Sie nicht außerhalb des Demo-Fensters ziehen. Aber das ist cool – das Ziehen funktioniert auf normalen Seiten.)
Da Zellen mit CSS dimensioniert und gestylt werden, können Sie Media Queries verwenden, um für verschiedene Breakpoints unterschiedliche Zellenzahlen anzuzeigen. Versuchen Sie, diesen Media Query Pen zu vergrößern/verkleinern, um ihn in Aktion zu sehen.
/* full width cells by default */
.gallery-cell {
width: 100%;
}
@media screen and ( min-width: 768px ) {
/* half-width cells for larger devices */
.gallery-cell { width: 50%; }
}Sogar die vorherigen & nächsten Schaltflächen und die Seitenpunkte sind gestaltbar.
Siehe den Pen Flickity – benutzerdefinierte Vorher/Nachher-Schaltfläche & Seitenpunkt-Stil von David DeSandro (@desandro) auf CodePen.
Flickity fügt der ausgewählten Zelle eine Klasse is-selected hinzu.
Siehe den Pen Flickity – is-selected Klasse von David DeSandro (@desandro) auf CodePen.
Sie können die Klasse is-selected verwenden, um beeindruckende Übergänge zu erzielen. Diese Bildgalerie dimmt und verpixelt benachbarte Zellen. Bilder werden mit flexiblen Box-CSS innerhalb der Zellen zentriert.
Siehe den Pen Flickity – Bildergalerie mit ausgewählter Stil von David DeSandro (@desandro) auf CodePen.
Das ist alles, was es braucht. Flickity erstellt Touch-freundliche, wischbare Karussells, die sich leicht mit CSS gestalten lassen. Alles andere ist die Feinabstimmung Ihrer Implementierung, um Ihrer Vision gerecht zu werden.
Flickity-Optionen
Flickity bietet mehrere weitere nützliche Funktionen, die über seine Optionen aktiviert werden. Hier sind ein paar meiner Favoriten.
wrapAround: true wickelt Zellen um zum anderen Ende, sodass Sie weiterwischen können, ohne ein Ende zu erreichen.
Siehe den Pen Flickity – wrapAround von David DeSandro (@desandro) auf CodePen.
freeScroll: true ermöglicht es, Zellen frei zu scrollen und zu wischen, ohne Zellen an einer Endposition auszurichten. Geben Sie diesem hier einen guten Wisch!
Siehe den Pen Flickity – freeScroll von David DeSandro (@desandro) auf CodePen.
Kombinieren Sie freeScroll und wrapAround und es fühlt sich an, als könnten Sie es für immer wischen, Mann.
Siehe den Pen Flickity – freeScroll, wrapAround von David DeSandro (@desandro) auf CodePen.
Sie können Layouts entwerfen, bei denen Flickity für einige Breakpoints aktiviert, für andere jedoch deaktiviert ist. Mit watchCSS: true überwacht Flickity den Inhalt von :after des Galerieelements. Flickity wird aktiviert, wenn der Inhalt von :after „flickity“ ist.
/* enable Flickity by default */
.gallery:after {
content: 'flickity';
display: none; /* hide :after */
}
@media screen and ( min-width: 768px ) {
/* disable Flickity for large devices */
.gallery:after {
content: '';
}
}Versuchen Sie, den watchCSS Pen zu vergrößern/verkleinern, um ihn in Aktion zu sehen.
Dies ist eine ziemlich coole Funktion, da sie Ihnen das Schreiben von fehlerhaftem JavaScript beim Ändern der Fenstergröße erspart. Da die Aktivierung über CSS ausgelöst wird, bleiben Ihre Media-Query-Logiken an einem Ort.
Zusätzlich zu den Optionen bietet Flickity eine voll ausgestattete API mit nützlichen Methoden, Eigenschaften und Ereignissen. Flickitys API ermöglicht es Ihnen, auf seiner Basisfunktionalität aufzubauen, sodass es in Kombination mit anderen Widgets und Verhaltensweisen auf Ihrer Website verwendet werden kann.
Zugegeben, Sie brauchen vielleicht kein Karussell. Aber wenn doch, sollten Sie eines verwenden, das sowohl Ihren Benutzern als auch Ihnen selbst hilft. Flickity ist einfach zu implementieren und flexibel zu handhaben. Mit Flickity können Sie Karussells, Galerien und Slider erstellen, die sich nahtlos in Ihre Designs einfügen. Ich hoffe, Flickity befähigt Entwickler, Karussells zur Erstellung überzeugender Benutzererlebnisse zu nutzen. Wenn nichts anderes, macht es Spaß, sie durchzuwischen.
Danke dafür. :)
Ich frage mich, ob es einen empfohlenen Ansatz gibt, um die Ladezeiten von Seiten gering zu halten, wenn beispielsweise viele Bilder in der zu rendernden Liste vorhanden sind oder wenn die Bilder selbst sehr große Dateigrößen haben. Gibt es eine Möglichkeit, neue Bilder über AJAX zu laden? Oder einen ähnlichen Ansatz wie das dynamische Laden von Listen?
Ich verwende immer Platzhalterbilder für alle Folien außer den ersten beiden – normalerweise ein winziges Inline-Base64-PNG. Dann, wenn das Karussell aktiviert ist, werden die nächsten Bilder nacheinander ausgetauscht. Ich habe Flickity noch nicht ausprobiert, aber ich stelle mir vor, dass es auf die gleiche Weise funktionieren könnte.
Lazy Loading ist ein heiß diskutiertes Feature für Flickity. Ich plane, Unterstützung dafür später hinzuzufügen.
Sie können lazySizes einfach mit Flickity kombinieren. lazySizes ist ein Lazyloader, der automatisch jede Sichtbarkeitsänderung der aktuellen und auch zukünftiger Bilder erkennt, ohne zusätzliche Konfiguration, und daher mit jeder Art von JS/CSS-Verhalten funktioniert. Hier ist eine Demo mit lazySizes und flickity. (Hier ist auch ein Beispiel mit lazysizes und isotope)
Wenn Ihnen Lazy Load wichtig ist, gibt es dieses Karussell-Plugin (derzeit in der Entwicklung, aber wir verwenden es bereits produktiv in meinem Unternehmen): http://iliketomoes.github.io/elbajs/.
Vorteile: Lazy Load, Multi-Serve-Bilder, keine Abhängigkeiten, Null-Element-Ladung (für Browser, die Animationen unterstützen), MIT-Lizenz.
Nachteile: IE9+, nur für Bilder, braucht noch einige Verbesserungen.
Entschuldigung für den Link, da ist ein Tippfehler.
Das ist der richtige
http://iliketomatoes.github.io/elbajs/
Ich frage mich, wie sich das im Vergleich zu etwas wie Slick Slider verhält. Es gibt so viele Slider-Bibliotheken da draußen… für neue Entwickler ist es schwer, herauszufinden, welche gut ist. Es gibt eine großartige Gelegenheit für jemanden, einen Ort für die Bewertung all dieser kleinen Widgets zu schaffen.
Slick Slider hat die meisten der gleichen Funktionen (ich habe es gerade in einem Projekt verwendet), außer der freeScroll-Funktion.
Dennoch scheinen beide großartige Slider/Karussell-Plugins zu sein.
Ich benutze derzeit Owl Carousel, aber mir gefällt das Aussehen von Flickity. Es verwendet Prozentsätze, und Sie können die Breite jeder Folie in Ihrem CSS mit Media Queries festlegen. Mir gefällt auch, dass Sie die vorherigen und nächsten Folien vorschauen können, wenn Sie die Breite auf weniger als 100 % setzen.
http://bxslider.com/ ist definitiv eine gute Option. Es bietet ein extrem hohes Maß an Anpassung und integrierte Funktionen und ist – im Gegensatz zu Flickity – kostenlos für die kommerzielle Nutzung! Schauen Sie sich einfach die Beispiele und die API an, und es wird klar.
Wir haben Slick Slider aufgrund seiner geringen Größe, des Lazy-Loadings und der guten Browserunterstützung häufig verwendet. Wir fanden ihn stabiler als Flexslider.
Der einzige anfängliche Nachteil, den ich bei Flickity sehe, ist das Fehlen der IE8-Browserunterstützung. Viele unserer Kunden haben immer noch 10-12 % ihrer Besucher, die IE8 verwenden, daher bin ich mir nicht sicher, ob die Flickity-Fallback-Option gut genug funktionieren würde.
Danke für die Prüfung! Die Browserunterstützung von Flickity umfasst IE8+ und Android 2.3+.
Ich habe diese Woche geplant, das Karussell von meiner Website zu entfernen… ich werde es einfach durch eines dieser ersetzen! Sie sind großartig
Ich schließe mich ein paar anderen Kommentaren an, wie sieht es mit einer Art Lazy-Load-ähnlichen Bandbreitenschoner aus? Gibt es etwas? Auf der Roadmap vielleicht?
Vielleicht habe ich es hier übersehen, aber für mich ist eine der kritischsten Funktionen eines Karussells, einen Textabsatz als „Fußzeile“ zu enthalten, der das Bild erklärt und Links enthalten kann.
Gibt es eine Möglichkeit, den fehlerhaften Effekt zu beheben, der auftritt, wenn man außerhalb des Rahmens klickt und zieht? Im Moment kann man das Ziehen nicht loslassen, wenn man nicht loslässt, bevor man den Rahmen verlässt. Das sehe ich oft bei Karussells und es stört mich immer.
Wie im Artikel erwähnt
Eigentlich funktioniert es auf normalen Seiten nicht, wenn Ihr Browser nicht den gesamten Bildschirm ausfüllt. Wenn Sie außerhalb des Browserfensters ziehen, tritt das gleiche Problem auf.
Natürlich funktioniert es nicht. Ihre Maus befindet sich nicht mehr im Browser, sodass der Browser nicht wissen kann, was Sie damit tun…
Sieht cool aus! Gibt es eine Möglichkeit, den Slider mit Trackpad-Gesten zu steuern, wie z. B. seitliches Scrollen auf meinem MacBook?
Das sieht großartig aus, aber ich habe ein Problem gefunden. Wenn Sie versuchen, auf dem Slider nach unten zu scrollen, scheint die Touch-Erkennung des Plugins das standardmäßige Seiten-Scrolling zu verhindern.
Dies ist ein ziemlich signifikantes UX-Problem. Wenn es behoben wird oder es eine Art Workaround gibt, würde ich dies sicherlich in meinen Projekten verwenden.
Ich sollte präzisieren: Dies geschieht, wenn versucht wird, auf einem Touch-Gerät zu scrollen.
Hallo Robert! Danke, dass Sie sich das angesehen haben. Der Umgang mit vertikalem Scrollen auf Touch-Geräten ist eine knifflige Situation. Das aktuelle Verhalten ist, dass Sie sowohl den Karussell schieben als auch die Seite vertikal scrollen können. Ich prüfe, ob dieses Verhalten geändert werden soll. Siehe Flickity Issue #67
Danke für die Antwort, David. Ich bin selbst auf ähnliche Probleme gestoßen, als ich versuchte, das Bootstrap-Karussell Touch-reaktiv zu machen, und konnte keine Lösung finden, um vertikales Scrollen zu ermöglichen. Vielleicht würde eine Art debounce-ähnliche Funktion helfen?
Wie handhaben Sie
wrapAroundintern? Klonen Sie Zellen, verschieben Sie Zellen im DOM, positionieren Sie Zellen absolut oder verwenden Sie eine andere Technik?Zellen an den Enden werden neu positioniert, sodass sie neben dem Ende erscheinen, das am besten sichtbar ist. Sehen Sie, wie es im Quellcode gemacht wird
Sieht großartig und ziemlich perfekt für mich aus. Das Einzige, was mir bisher fehlt, ist eine Art „autoScroll“ bei Verwendung der Option „freeScroll“. „autoPlay“ funktioniert nicht wie erwartet.
Einige Dinge, die ich an Flickity liebe
<div>s tun, die die „Folien“ sind. Es könnten Bilder, Filme, Text oder absolut alles sein. Und Sie erhalten einfach eine einfache Klasse, um zu wissen, welche aktiv ist, was bedeutet, dass Sie für die aktiven (und inaktiven) Folien problemlos jede gewünschte Formatierung vornehmen können.content? Sehr schön.Meiner Meinung nach brauchen wir keine Karussells wie Flickity. Es ist nicht mehr 2008. Solche Arten von Scrollern können durch natives
overflow-x:scrollersetzt werden, und das wäre schnell und zugänglich. Sogar Unternehmen wie Apple und Google verwenden immer mehroverflow:auto.Es gibt sogar eine Spezifikation auf w3.org, die das Einrasten an Elemente erlaubt. Sie ist bereits in IE vorhanden und bald auch in Safari http://dev.w3.org/csswg/css-snappoints/
Es gab auch einen guten Artikel auf CSS-Tricks über diese Art von Karussell.
Hallo,
Für Chrome nicht in Ordnung, aber Firefox macht es möglich :)
Einfach großartiges Skript! Danke für diese Präsentation.
Das ist eine gute Alternative zu OwlCarousel oder iDangerous' Swiper.
Schönen Tag!
Und vergessen Sie auch nicht Slick, RoyalSlider und iScroll und Dutzende ähnlicher Skripte. Ich würde iScroll gegenüber Flickity bevorzugen, ein sehr solides Skript https://github.com/cubiq/iscroll
Das ist sehr traurig. Haben wir die UX-Katastrophe, die Karussells verursachen, schon vergessen? Ganz zu schweigen davon, dass dieses Plugin über 5000 Zeilen lang ist? Für ein Karussell?
Sparen wir unseren Nutzern die Frustration und verzichten wir komplett auf Karussells.
Die ersten 4 Absätze des Artikels befassen sich mit den Problemen, die Karussells verursachen können, und wie Flickity sie löst. Ob ein Entwickler sich für die Verwendung eines Karussells entscheidet, liegt bei ihm. Aber wenn sie es tut, hoffe ich, dass sie Flickity wählt, _weil_ es darauf abzielt, viele der Probleme zu lindern, die andere Karussells mit sich bringen.
Flickitys Quellcode ist 5000 Zeilen lang, weil er alle seine Funktionen und Abhängigkeiten für eine einfache Verwendung enthält. Wenn Sie sich Gedanken über die Dateigröße machen, können Sie Ihre eigene erstellen, indem Sie js/index.js bearbeiten. Ich habe Flickitys Dateiverwaltung hier beschrieben.
Hallo David,
Ich liebe deine Arbeit, mach weiter so!
Mit Bewunderung aus Paris,
Ist das funktionsreicher als owlcarousel?
http://www.owlcarousel.owlgraphic.com/docs/api-options.html
Ich sehe nichts Neues, frage also zur Bestätigung.
Ein wenig spät zur Party, aber Sie sollten die Scrollrichtung prüfen und das Karussell aktivieren/deaktivieren, wenn es vertikal ist. -> Sie können auf Mobilgeräten nicht nach unten scrollen. Riesiges Problem. Gibt Ihnen das Gefühl, eine Google Maps-Einbettung zu haben.
Hallo David,
Gute Arbeit, ich liebe deinen Code :)
Danke David,
Sehr nützliche Arbeit, die Sie geleistet haben.
Hallo an alle und danke David für dieses erstaunliche Skript. Ich habe versucht, Slick und Swiper zu integrieren, aber als Neuling verstehe ich Flickity viel besser.
Eine Frage, die ich habe. Da ich eine Galerie mit 1 bis X Bildern habe, möchte ich die Bilder immer zentrieren. Selbst wenn ich nur ein Bild habe. text-align: center funktioniert nicht.
Zum Beispiel habe ich
oder
Da ich unterschiedliche Breiten für die Bilder habe, verwende ich dieses CSS
und dieses JS
Kann mir dabei jemand helfen?
Grüße und danke Fabo
Entschuldigung, ich bin es wieder, ich habe es zum Laufen gebracht.
Ich musste nur
verwenden und entfernen
von .flickity-gallery
Ich wollte Fancybox2 integrieren, aber wenn ich versuche, den Flickity-Inhalt zu ziehen, öffnet sich immer das Fancybox-Bild. Ich musste Flickity ändern zu
Haben Sie eine Idee, wie ich Flickity mit Fancybox2 verwenden kann?
Grüße Fabo
Hallo David,
Ich muss sagen, dass Ihre Arbeit an Flickity wirklich mein jahrelanges Ringen um ein Karussell-Skript beendet. Ich habe die Entwicklerlizenz sofort nach dem Überfliegen der Dokumentation gekauft.
Nur um Ihnen mitzuteilen, dass ich jahrelang mit verschiedenen Karussell-Skripten gekämpft habe, viele Anwendungsfälle gesehen habe, die sie nicht richtig handhaben konnten, und sie am Ende nicht in meinen Projekten verwendet habe.
Das Hauptproblem, das ich an Karussell-Skripten habe, ist, wie Sie sagten, sie sind für Entwickler unfreundlich. Entweder sind sie schwer zu konfigurieren, erfordern, dass Sie Breakpoints als JS-Objekt angeben, handhaben Elemente mit Breite: auto, Höhe: 100% nicht sehr gut oder haben ihre eigenen Nachteile in bestimmten Fällen.
Aber heute, als ich (wieder) nach einem guten Karussell-Skript suchte, um es in mein Projekt zu implementieren, habe ich diesen Beitrag hier gesehen, ihn mir angesehen und gesehen, dass er von Metafizzy entwickelt wurde. Wow, ich dachte, das muss ein gutes sein!
Jetzt habe ich gerade fünf Minuten damit gearbeitet, und mein jahrelanges Problem mit Karussell-Elementen mit Breite: auto, Höhe: 100% wurde gelöst.
Vielen Dank für dieses großartige Skript! Ich freue mich auf Funktionen wie Lazy Loading und einen Mechanismus, um Elemente aus dem DOM zu entfernen, wenn sie nicht angezeigt werden.
Hallo, ist es möglich, auszuwählen, wie viele Elemente pro Zeit gescrollt werden?
In Demos sehe ich nur ein Element pro Zeit.
Lass es mich wissen
danke!