201004Mai

Scripty2: Carousel-Beispiel im Apple-Stil

Jeder dürfte schon einmal das Carousel auf der Apple-Website gesehen haben, das die Produkte von Apple in einer horizontalen Liste darstellt. Thomas Fuchs, der Entwickler von Script.aculo.us, arbeitet seit einiger Zeit an dem Nachfolger seines JavaScript-Frameworks, das den Namen Scripty2 trägt und bereits getestet werden kann. Er hat auf seinem Blog nun ein neues Scripty2-Beispiel veröffentlicht, in dem er das Carousel der Apple Store-Website reproduziert hat. Das Skript steht auf dieser Seite und bei GitHub zum Download bereit.

scripty2 - Mac Store Example

Das interaktive Carousel funktioniert besser als der Effekt der Apple-Seite und kann schon mit einer einzigen Zeile eingebettet werden:

  • var carousel = new S2.UI.Carousel("productbrowser", {nextSelector: '#pb-rightarrow', prevSelector: '#pb-leftarrow'});

Das Element mit der ID "productbrowser" ist dabei der Container, der die zu scrollende Liste enthält. Erweiterte Code-Beispiele und Snippets finden sich auf der Website des Carousels. Das Animations-Framework Scripty2 sieht sehr vielversprechend aus und stellt mit Sicherheit eine interessante Ergänzung zu bestehenden Bibliotheken dar.