---
title: "Javascript Slider Effekte – eine kleine Übersicht"
author: "Ellen Bauer"
date: 2009-10-20
lang: de
source: https://elmastudio.de/javascript-slider-effekte-eine-kleine-uebersicht/
---

# Javascript Slider Effekte – eine kleine Übersicht

In den letzten Tage habe ich mich auf die Suche nach Javascript Slider-Effekten gemacht, mit denen man Fotos und Texte auf elegante Weise animieren kann. Es gibt jede Menge schöne Lösungen, und es kommt auf das jeweilige Webdesign und die Inhalte an, welche Lösung am besten geeignet ist. Das Gestalten des Sliders mit CSS ist dann eigentlich recht einfach, obwohl ich doch ein bisschen basteln musste, bis ich meine Lösung mit 2 unterschiedlichen Slider-Effekten auf einer Seite hinbekommen habe ;-) Hier eine kleine Übersicht meiner Recherche:

## 1. [Easy Slider](http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding)

![Javascript Slider Effekte](https://elmastudio.de/wp-content/uploads/2009/10/javascript-slider-01.jpg)

Den [Easy Slider](http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding) gibt es in verschiedenen Varianten. Entweder als automatisch animiert, oder mit numerische Navigation. Außerdem gibt es auch eine Vorlage, falls du mehrere Slider auf einer Seite unterbringen willst. Der Code ist leicht verständlich und einfach zu verändern. Bei meinem Projekt, habe ich mich für den Easy Slider entschieden. [Hier](http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding) findest du die Beschreibung, eine Demo und den Code zum downloaden.

## 2. [Coda Slider](http://www.ndoherty.biz/2007/10/coda-slider-11/)

![Javascript Slider Effekte](https://elmastudio.de/wp-content/uploads/2009/10/javascript-slider-02.jpg)

Der [Coda Slider](http://www.ndoherty.biz/2007/10/coda-slider-11/) ist wohl einer der beliebtesten Javascript Slider. Berühmtes Beispiel und Namensgeber ist der Slider-Effekt auf der [Coda-Webseite](https://www.panic.com/coda/) von Panic. Ein tolles Tutorial zum Coda Slider mit Demo findest du auch bei [jQuery for Designers](https://jqueryfordesigners.com/coda-slider-effect/).

## 3. [jCarousel](https://sorgalla.com/projects/jcarousel/)

![Javascript Slider Effekte](https://elmastudio.de/wp-content/uploads/2009/10/javascript-slider-03.jpg)

Eine weitere Option ist der [jCarousel-Slider](https://sorgalla.com/projects/jcarousel/). Jcarousel bietet verschiedenste Möglichkeiten, wie automatisches Scrollen, vertikaler Slides oder das Laden von dynamischen Inhalten.

## 4. YUI Carousel Component

![Javascript Slider Effekte](https://elmastudio.de/wp-content/uploads/2009/10/javascript-slider-04.jpg)

Eine weitere Slider-Option, die mit der YUI Library von Yahoo funktioniert, ist der YUI Carousel Slider. Die Varianten sind ähnlich flexibel, wie bei jCarousel.

## 5. [Slider Gallery](https://jqueryfordesigners.com/slider-gallery/)

![Javascript Slider Effekte](https://elmastudio.de/wp-content/uploads/2009/10/javascript-slider-05.jpg)

Ein klasse Tutorial von [jQuery for Designers](https://jqueryfordesigners.com/slider-gallery/), wie du den Slider-Effekt der Apple Webseite hinbekommen kannst. Mit einer genauen Beschreibung, Screencast, Demo und Code kann eigentlich nichts mehr schief gehen.

### Slider im Einsatz

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

[Radiumlabs](http://www.radiumlabs.com/) hat einen großen Intro-Slider. Auf der Webseite des Designers von Radiumlabs [branded07](http://www.branded07.com/) siehst du ebenfalls einen sehr schönen Slider. Eine schönen Foto-Slider hat z.B die Webseite Tennessee Summer. Und einen Slider mit zusätzlicher Navi gibt’s auf der Webseite Newsberry.

Kennst du weitere tolle Javascript-Slider oder Webseiten mit tollen Slider-Effekten? Dann schreib doch einfach einen Kommentar, ich freue mich auf deine Tipps!