In den letzten Tage habe ich mich auf die Suche nach Javascript Slider-Effekten gemacht, mit denen man Fotos und Texte auf ele­gante Weise ani­mieren kann. Es gibt jede Menge schöne Lösungen, und es kommt auf das jewei­lige Webdesign und die Inhalte an, welche Lösung am besten geeignet ist. Das Gestalten des Sliders mit CSS ist dann eigent­lich recht ein­fach, obwohl ich doch ein biss­chen bas­teln musste, bis ich meine Lösung mit 2 unter­schied­li­chen Slider-Effekten auf einer Seite hin­be­kommen habe ;-) Hier eine kleine Über­sicht meiner Recherche:

1. Easy Slider

Den Easy Slider gibt es in ver­schie­denen Varianten. Entweder als auto­ma­tisch ani­miert, oder mit nume­ri­sche Navigation. Außerdem gibt es auch eine Vorlage, falls du meh­rere Slider auf einer Seite unter­bringen willst. Der Code ist leicht ver­ständ­lich und ein­fach zu ver­än­dern. Bei meinem Projekt, habe ich mich für den Easy Slider ent­schieden. Hier fin­dest du die Beschreibung, eine Demo und den Code zum downloaden.

2. Coda Slider

Der Coda Slider ist wohl einer der belieb­testen Javascript Slider. Berühmtes Beispiel und Namensgeber ist der Slider-Effekt auf der Coda-Webseite von Panic. Ein tolles Tutorial zum Coda Slider mit Demo fin­dest du auch bei jQuery for Designers.

3. jCa­rousel

Eine wei­tere Option ist der jCarousel-Slider. Jcarousel bietet ver­schie­denste Möglichkeiten, wie auto­ma­ti­sches Scrollen, ver­ti­kaler Slides oder das Laden von dyna­mi­schen Inhalten.

4. YUI Carousel Component

Eine wei­tere Slider-Option, die mit der YUI Library von Yahoo funk­tio­niert, ist der YUI Carousel Slider. Die Varianten sind ähnlich fle­xibel, wie bei jCarousel.

5. Slider Gallery

Ein klasse Tutorial von jQuery for Designers, wie du den Slider-Effekt der Apple Webseite hin­be­kommen kannst. Mit einer genauen Beschreibung, Screencast, Demo und Code kann eigent­lich nichts mehr schief gehen.

Slider im Einsatz

Zur Inspiration, hier noch ein paar sehr schöne Beispiele, wie die Javascript-Slider auf Webseiten ein­ge­setzt werden können:

Radiumlabs hat einen großen Intro-Slider. Auf der Webseite des Designers von Radiumlabs branded07 siehst du eben­falls einen sehr schönen Slider. Eine schönen Foto-Slider hat z.B die Webseite Tennessee Summer. Und einen Slider mit zusätz­li­cher Navi gibt’s auf der Webseite Newsberry.

Kennst du wei­tere tolle Javascript-Slider oder Webseiten mit tollen Slider-Effekten? Dann schreib doch ein­fach einen Kommentar, ich freue mich auf deine Tipps!