201008Jun

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.

dualSlider

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.

UPDATE
Das Projekt wurde inzwischen eingestellt und steht leider nicht mehr zur Verfügung.