Moderne jQuery Carousel-Slider mit dem carouFredSel-Plugin

jQuery Carousel-Slider sind sehr beliebt, um z.B. die neusten Projekte im Portfolio, aktuelle Blog-Artikel mit Vorschaubildern oder eine Bildergalerie auf einer Webseite zu integrieren. Den Slider bewegt man entweder automatisch, mit Hilfe von Rechts/Links (bzw. Oben/Unten) Buttons oder einer Seiten-Nummerierung. So kann man auf wenig Platz viel Inhalt darstellen, und vorausgesetzt man übertreibt es mit dem hin und her sliden nicht, ist der Effekt für den Webseiten-Besucher ein echter Hingucker. Mit dem vielseitigen jQuery-Plugin carouFredSel kannst du leicht deinen eigenen Carousel-Slider auf deiner Webseite einbauen.

Hier kannst du dir unsere Demo-Version des Sliders anschauen

jQuery Carousel Slider

1. Den caroufredsel-Slider verwenden

Du kannst nicht nur Bilder mit Hilfe des Carousel-Sliders »caroufredsel« animieren, sondern auch ordered oder unordered Listen-Elemente, sowie Bilder mit Bildunterschriften. Außerdem kannst du deine Slider-Bilder sogar mit einem Lightbox-Effekt kombinieren. Auf dieser Demo-Seite des Plugins kannst du dir die verschiedenen Beispiele anschauen.

Eine tolle Möglichkeit der Plugin-Webseite ist, dass du dir zu jedem Beispiel den entsprechenden JavaSCript, HTML und CSS Code anschauen kannst.

jQuery Carousel Slider
Zu jedem Slider-Beispiel kannst du dir es den entsprechenden Code kopieren.

1.1. Die JavaScript-Dateien aufrufen

Nachdem du dir den Plugin-Ordner heruntergeladen hast (siehe Download-Button im Webseiten-Header), lädst du die JavaScript-Datei des Plugins (derzeit jquery.carouFredSel-2.1.3.js) am besten in einen Ordner »js« auf deinen Server hoch und rufst die Datei innerhalb des head-tags deiner Webseite auf.

<script type="text/javascript" src="deinPfad/js/jquery.carouFredSel.js"></script>

Außerdem benötigst du (falls du diese noch nicht aufrufst) die jQuery-Version. Diese musst du nicht unbedingt auf deinen Server hochladen, sondern du kannst sie einfach über die Google Libraries API aufrufen.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Möchtest du weitere JavaScript-Animationen nutzen, kannst du noch Easing einfügen. Hierzu findest du Infos auf der Installations-Seite von CarouFredSel.

1.2. Den HTML-Code erstellen

Als nächstes kannst du den HTML-Code für den Inhalt deines Sliders erstellen. Dabei orientierst du dich am besten wieder an den Code-Beispielen der Webseite. Ich habe für meine Slider-Demo eine Reihe von Bildern verwendet. Der Code sieht dann ungefähr so aus:

<div id="wrap"> 
<div class="image_carousel"> 
	<div id="foo2"> 
		<img src="deinPfad/slider-pics/01.jpg" alt="image01" width="170" height="170" /> 
		<img src="deinPfad/slider-pics/02.jpg" alt="image02" width="170" height="170" /> 
		<img src="deinPfad/slider-pics/03.jpg" alt="image03" width="170" height="170" />
	</div> 
	<div class="clearfix"></div> 
	<a class="prev" id="foo2_prev" href="#"><span>prev</span></a> 
	<a class="next" id="foo2_next" href="#"><span>next</span></a> 
</div> 
</div> 

Du kannst so viele Bilder einfügen, wie du möchtest. Über die JavaScript-Konfiguration kannst du dann später bestimmen, wie viele Bilder deines Sliders angezeigt werden sollen. Die Anchor-tags bilden den Vor- und Zurück Button des Sliders.

1.3. Das CSS-Styling deines Sliders

Jetzt fügst du noch den CSS-Code für deinen Slider ein. Am besten du kopierst wieder den Code des Beispiel-Sliders auf der Plugin-Webseite und veränderst ihn nach deinen Wünschen.

Für den Demo-Slider habe ich mir z.B. ein eigenes Hintergrund-Image, sowie ein Sprite-Image für meine Buttons erstellt. Beim Aufrufen der Images im CSS musst du wieder darauf achten, dass du den richtigen Ordner-Pfad angibst.

Die CSS-Styles für den Demo-Slider sieht so aus:

body {
	margin:0 auto;
	width:900px;
}
#wrap {
	margin: 100px 0px 0px 0px;
	width:840px;
	height:250px;
	background:url(carousel-slider/bg.jpg) 0 0 no-repeat;
}
.image_carousel {
	padding: 30px 0 15px 50px;
	position: relative;
}
.image_carousel img {
	padding: 0px;
	margin: 7px;
	display: block;
	float: left;
}
a.prev, a.next {
	background: url(carousel-slider/sprite.png) 0 0 no-repeat transparent;
	width: 45px;
	height: 170px;
	display: block;
	position: absolute;
	top: 40px;
}
a.prev {
	left: -60px;
}
a.prev:hover {
	background-position: 0 -170px;
}
a.next {
	right: -60px;
	background-position: -45px 0px;
}
a.next:hover {
	background-position: -45px -170px;
}
a.prev span, a.next span {
	display: none;
}
.clearfix {
	float: none;
	clear: both;
}

Natürlich kannst du deinen eigenen Slider ganz individuell gestalten. Wieder findest du tolle Inspirationen in den vielen schönen Beispielen auf der Plugin-Webseite.

1.4. Den Slider mit JavaScript aufrufen

Als letzten Schritt musst du noch den entsprechenden JavaScript-Code für deinen Slider aufrufen. Dazu fügst du folgenden Code innerhalb des head-tags deiner Webseite ein:

<script type="text/javascript"> 
$(document).ready(function() {
$("#foo2").carouFredSel({
	auto : false,
	items : 4,
	prev : {	
		button	: "#foo2_prev",
		key		: "left"
	},
	next : { 
		button	: "#foo2_next",
		key		: "right"
	},
});
});
</script> 

Der div-container meines Sliders hat die ID von foo2.

Du hast jede Menge Möglichkeiten den Slider ganz nach deinen Wünschen anzupassen. Auf der Configuration-Site des Plugins findest du eine gut dokumentierte Übersicht aller Optionen. Ich habe in meinem Demo-Slider z.B. den das automatische Sliden deaktiviert und den Anzahl der angezeigten Bilder auf 4 gesetzt. Außerdem habe ich einen Vor- und Zurück Button in meiner Animation verwendet.

Benötigst du weitere Hilfe für deine Plugin-Einstellungen findest du praktische Tipps auf der Tips & Tricks Seite des Plugins. Als extra-Feature gibt es sogar einen Configuration-Roboter auf der Webseite, der dir bei den Einstellungen deines Sliders weiterhilft.

Wie gefällt dir das Carousel-Slider Plugin CarouFredSel? Hast du bereits Erfahrungen mit diesem Plugin, oder kennst du weitere hilfreiche JavaScript-Slider Plugins? Über deine Tipps und dein Feedback freue ich mich sehr!

Rate this post

7 Kommentare

    • Hallo Max,

      vielen Dank für deine Info :-) Komisch, ich habe gerade noch einmal alle Browser gecheckt, konnte allerdings keinen Fehler entdecken. Welche Safari-Version nutzt du denn?

      Viele Grüße
      Ellen

      • Hallo Ellen!

        Ich benutze 3.0.4. Au dem G5 sieht es auch so aus. Liegt ja vielleicht an der veralteten Safari-Version. Werde mal dem Elmastduio zu Ehren eine neuere Version installieren und mich wieder melden.
        @Ellen – ich habe Dir einen Screenshot zugemailt.

        Grüße und ein schönes Wochenende

        Max

        • Hallo Max,

          vielen Dank für den Screenshot, das sieht natürlich nicht so schön aus :-( Hast du es bereits mit einem Browser-Update versucht?

          Ich habe inzwischen auch noch einmal Browsershots.org genutzt, um die verschiedensten Browser-Ansichten zu testen. Aber auch dort habe ich keine Fehler-Ansicht (auch nicht bei Safari 3) erhalten. Das ist wirklich sehr komisch…Eventuell kann ich das CSS noch ein wenig anpassen. Ich werde mal schauen…

          Vielen Dank auf alle Fälle und viele Grüße,
          Ellen

  1. schöner fände ich es noch, wenn man beim draufklicken eine bildpräsentation via lighbox oder so hat.

    ansonsten spitze! bei mir geht alles

    • @dewe: Vielen Dank für deinen Kommentar und das Feedback :-)

      Es gibt auch die Möglichkeit den Slider mit verschiedenen Lightbox-Plugins (z.B. Fancybox, prettyPhoto, Lightbox, Pirobox) zu kombinieren. Auf diese Beispielseite kannst du dir verschiedene Slider-Lightbox Kombis anschauen.

      Viele Grüße,
      Ellen

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *