Lory Carousel Slider Mit CSS-Animation und Touch-Unterstützung

Von allem Karussell-Plugins online Ich muss meinen Hut kippen Lory. Es ist so ein einfaches konzept aber es ist leicht einer von die stärksten Slider im Internet.

Das verminderte Version insgesamt etwa 7 KB, was aber nicht klein ist ist nicht schlecht für einen berührungsaktivierten Karussellschieber.

Sie können dieses Plugin zu jeder Website hinzufügen, seitdem läuft auf jQuery oder plain vanilla JS. Es kann mit laufen keine Abhängigkeiten Das ist gut für die Kompatibilität.

Lory ist auch eines der wenigen Plugins verschlechtert sich nicht in älteren Browsern. Es ist vollständig in IE10 unterstützt+, und ältere Versionen können den Schieberegler nur noch ausführen ohne Animationen und kleine Extras.

Du musst es tun Führen Sie die programmgesteuerte Codierung selbst durch wenn Sie Inhalte hinzufügen möchten, aber es ist überraschend einfach. Sie können festlegen, wie groß die einzelnen Fenster sein sollen, wie lange sie animiert werden sollen und wie mit responsiven Browsern verfahren werden soll.

Besuche die Lory-Homepage für Quellcode und Details zum Setup.

Beginnen Sie mit dem Hinzufügen der Lory JS-Bibliothek zu deiner Seite Kopf Sektion, entweder als jQuery-Plugin oder als Vanille-Bibliothek. Alle Versionen sind aktuell gehostet auf dem Cloudflare-CDN, Daher ist es sehr einfach, eine Kopie ohne Downloads hinzuzufügen.

Wenn die JavaScript-Datei installiert ist, möchten Sie eine ungeordnete HTML-Liste mit den Folieninhalten, jedoch Lory, erstellen kommt mit ein paar vordefinierten Klassen also ist es gut zu bleib bei ihrem Modell.

Hier sind einige Beispielcode aus dem Lory GitHub Repo entnommen:

Jetzt in jQuery (oder einfach JS) können Sie einen Funktionsaufruf einrichten. Es sollte ungefähr so aussehen:

 $ ('. js_slider'). lory (unendlich: 1);

Beachten Sie das unendlich Option ist nur eine von vielen Funktionen, die Sie anpassen können. Und Sie können das jederzeit ändern .js_slider Klasse für Ihre Bedürfnisse.

Bei der Entwicklung mit diesem Plugin kann es zu Unmengen an Anpassungsfragen kommen. Ich würde es wärmstens empfehlen Durchsuchen der Dokumentation Das ist ganz unten auf der GitHub-Seite.

Wahrscheinlich nicht der beste Ort für Dokumente, aber zum Glück sind sie ziemlich klein. Du hast nur ungefähr 10 Optionen anpassen und vielleicht 10-12 verschiedene Veranstaltungen du kannst damit basteln. Diese Informationen finden Sie auch unten auf der Lory-Website. Sie sind jedoch viel einfacher auf GitHub zu lesen.

Updates sind nicht so häufig, aber Sie können es immer tun eine Ausgabeanfrage auf GitHub, wenn Sie auf Probleme stoßen. Wenn Sie wirklich Probleme mit dem Code haben, wird es wahrscheinlich einfacher sein, sie beim Stack Overflow zu lösen.

So oder so können Sie ziemlich schnell anfangen Verwenden des Cloudflare-CDN und der GitHub-Dokumente. Und wenn Sie nach einem suchen Live-Demo mit Code check out diesen CodePen-Eintrag.