Animierte Slider sind eine beliebte Methode, um beson­dere Inhalte, wie die neusten Blogartikel oder Freebies her­vor­zu­heben. Auch die neusten Design-Projekte kann man so attraktiv in einem Portfolio prä­sen­tieren. Und mit den vielen prak­ti­schen jQuery-Plugins wird einem die Arbeit leicht gemacht. Ich zeige dir, wie du einen Slider mit jeder Menge Optionen für deine Webseite erstellen kannst.

Schau dir hier eine Demo des Sliders an!

1. Plugin herunterladen

Als erstes lädst du dir das Plugin von der Plugin-Webseite her­unter. Hier siehst du schon etliche Demo-Funktionen des Plugins, z.B. Zoom, Shuffle, Fade und viele mehr.

Hast du das Plugin her­un­ter­ge­laden, fin­dest du im Ordner »jqe­rycyle« eine example.html Datei. Hier fin­dest du den benö­tigten Code für das Plugin.

2. Javascript-Code einfügen

Als erstes fügst du den benö­tigten Javascript-Code im Header inner­halb deines Head-Tags oder im Footer vor den html-Tag ein.

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.1/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/
cycle/jquery.cycle.all.2.74.js"></script>
<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow')
	.after('<div id="nav">')
	.cycle({
		fx: 'turnDown', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    pager:  '#nav'
	});
});
</script>

Mit diesem Code brauchst du du jQuery gar­nicht nicht mehr auf deinen eigenen Server hochzuladen.

3. Fotos bearbeiten

Deine Fotos für den Slider schnei­dest du jetzt in der gewünschten Größe in Photoshop o.ä. zu, und spei­cherst sie durch­num­me­riert am besten in einem Ordner namens »images« ab.

4. HTML-Code einfügen

Als wei­teren Code-Schnipsel fügst du die Fotos (img-Tags) in einen div-Tag mit dem class-Attribut »sli­de­show«. Kopiere dazu fol­genden Code und fügst ihn inner­halb des body-Tags auf deiner Seite ein. Achte darauf, dass du deine indi­vi­du­elle Breite (width) und Höhe (height) anpasst, und das rich­tige Zielverzeichnis für deine Image-Links wählst (bei meinem Beispiel: images/01.jpg).

<div class="slideshow">
	<img src="images/01.jpg" width="500" height="375" />
    <img src="images/02.jpg" width="500" height="375" />
    <img src="images/03.jpg" width="500" height="375" />
    <img src="images/04.jpg" width="500" height="375" />
    </div><!--end slideshow-->

Du kannst so viele Bilder ein­fügen, wie du magst.

5. CSS-Code einfügen

Jetzt musst du nur noch die CSS-Styles für deinen Slider anpassen. Dazu nimmst du die Styles aus der example.html, fügst sie in deine css-Datei (z.B. stlye.css) ein, und passt alle Farben, Größen und Schriften an. Im meinem Bespiel sieht der CSS-Code so aus. Gerne kannst du auch diesen kopieren, und dann deine indi­vi­du­ellen Anpassungen starten.

.slideshow {
	width: 540px;
	height: 395px;
	margin: 30px auto;
}
.slideshow img {
	padding: 20px;
	background: #8CC1EC;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#nav {
	margin: 5px auto;
	width: 540px;
	height: 30px;
}
#nav a {
	background: #8CC1EC;
	padding: 5px 8px 5px 8px;
	color:#fff;
	display:block;
	float:left;
	text-decoration: none;
	margin: 0 3px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#nav a.activeSlide {
	background: #000033;
}
#nav a:focus {
	outline: none;
}

Fertig ist dein ani­mierter Slider! Natürlich gibt es jede Menge Optionen für die Animation deiner Bilder. Ich habe z.B. einen soge­nannten Pager (also eine zusätz­liche Navigation) ein­ge­fügt, und die »turnDown«-Animation gewählt.

Eine Auflistung mit Demo-Codes aller Slider-Varianten fin­dest du auf der Plugin-Webseite unter dem Punkt »See More Demos and Examples«. Deine Anpassungen nimmst du dann in deinem Javascript-Code (siehe Punkt 2) vor.

Hast du noch Fragen zum jQuery Cycle Plugin, oder kennst du wei­tere hilf­reiche Javascript-Plugins mit denen man schnell Slider bauen kann? Schreibe mir doch einen Kommentar, ich freue mich über dein Feeback!