Alles was für die Nutzung von Unslider benötigt wird, ist, so erklärt Marc Schenker, ein wenig valides Markup, jQuery und ein bisschen CSS und schon lässt sich mit dem jQuery-Slider das Layout der Website in eine Slideshow umwandeln. Dafür bringt dieser auch einige nützliche Features mit sich.
Features von Unslider
Unslider zeichnet sich nicht nur durch seine Leichtgewichtigkeit – der jQuery-Slider ist gerade einmal 5.6 KB minified groß – sondern vor allem durch seine Flexibilität aus. So erlaubt er es dem User, das Aussehen des Sliders beliebig anzupassen. Dafür stehen eine ganze Reihe verschiedener Optionen, Settings, Methoden oder Callback-Events zur Verfügung.So unterstützt der Slider etwa verschiedene Skripte, wenn das <script>
-Tag vor Unslider referenziert wird; ebenso bietet der Slider Right-to-Left-Support sowie Unterstützung für Velocity.js und jquery.swipe.js.
Auch in Sachen Animation bringt Unslider zahlreiche Optionen mit sich: von der Default-Aufmachung, bei der sich der User manuell durch die einzelnen Slides klicken kann, über eine automatische Slideshow bis hin zu vertikalen Slidern oder einer automatischen Animation mit Fade-Out-Effekt stehen dem Nutzer zahlreiche Gestaltungsmöglichkeiten offen. Außerdem bietet Unslider unterschiedliche Methoden zur Kontrolle der Slider an, zum Beispiel init
, calculateSlides
, start
, stop
, animate
, next
oder prev
.
Installation
Die Installation von Unslider ist simpel. Zunächst wird das HTML entsprechend eingerichtet; Unslider nutzt dafür ein HTML-Element, in dem alle Slides als ungeordnete Liste gewrappt werden. Anschließend können sowohl jQuery als auch Unslider vor dem schließenden </body>
-Tag referenziert und das CSS eingerichtet werden. Abschließend muss Unslider noch entweder direkt im HTML oder in einer externen JavaScript-Datei mitgeteilt werden, was genau dargestellt werden soll – und fertig ist der jQuery-Slider für die eigene Website.
Mehr Informationen zu Unslider bietet die Produktwebsite, dort finden sich auch zahlreiche Demos, die den jQuery-Slider in Aktion zeigen.
Name | Unslider |
---|---|
Projektwebsite | http://unslider.com/ |
GitHub | https://github.com/idiot/unslider |
Webperformance und Page Speed 2021
mit Sven Wolfermann (maddesigns)
UX Design: Kitsch – du willst es doch auch!
mit Lutz Schmitt (Lutz Schmitt Design & Consulting)
SEO loves PR: Wie zwei Disziplinen gemeinsam erfolgreich sein können
mit Anne Kiefer (sexeedo GmbH)
Aufmacherbild: Set of web image sliders. Vector illustration von Shutterstock / Urheberrecht: Skymax