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.

Aufmacherbild: Set of web image sliders. Vector illustration von Shutterstock / Urheberrecht: Skymax