dualSlider: Mehrere Bereiche bei Klick austauschen
Eine sehr große Beliebtheit genießen mittlerweile die sogenannten Slider, mit denen sich Inhaltselemente (hauptsächlich Bilder) per Schaltfläche wechseln lassen. Um Zusatzinformationen zu einem Bild oder einem Video einzublenden, bieten sich verschiedene Lösungen an. Eine elegante Möglichkeit hat Rob Phillips von Hugo & Cat mit dem dualSlider geschaffen. Das jQuery-Plugin tauscht beim Klick auf die entsprechende Schaltfläche gleich zwei Bereiche aus, so dass in einem separaten Feld weitere Informationen untergebracht werden können.
Das Skript ist 123 Zeilen lang und verwendet ein individuelles Timer-Skript sowie das jQuery Easing Plugin zur Animation. Bei der Verwendung des Sliders lassen sich verschiedene Optionen einstellen:
- $(".carousel").dualSlider({
- auto: true,
- autoDelay: 6000,
- easingCarousel: "swing",
- easingDetails: "easeOutBack",
- durationCarousel: 1000,
- durationDetails: 600
- });
Die Slideshow kann mit dem Parameter "auto" also auch automatisch gestartet werden. Das einzige Manko des Plugins besteht in der fehlenden Dokumentation — lediglich die Demo-Seite gibt Aufschluss über die Implementierung des Skripts. So müssen auch die vordefinierten Klassen verwendet werden, wenn man den Quelltext des Plugins nicht verändern möchte.