CarouFredSel - un carrousel en JQuery pour vos éléments HTML

CarouFredSel est un carrousel configurable en JQuery pour faire défiler vos éléments HTML.

Ce plugin vous permettra de faire défiler n'importe quel type d'élément HTML, pas seulement des images.

CarouFredSel est facilement configurable, vous pouvez notamment choisir le sens de déplacement de votre carrousel (droite, gauche, bas ou haut), la durée avant chaque changement, et vous pouvez même le transformer en slider (changement au clic de l'utilisateur). Vous avez en plus la possibilité de paginer ce slider !

Son implémentation est très simple, il vous suffit d'inclure les différents fichiers .js du plugin, puis faire une liste d'éléments qui se trouveront dans un conteneur.

Un exemple tiré du site avec des images:

Un autre avec du texte:

	

		
Infinity
		
A concept that in many fields refers to a quantity without bound or end.
	
	

		
Circular journey
		
An excursion in which the final destination is the same as the starting point.
	
	

		
jQuery
		
jQuery  is a cross-browser JavaScript library designed to simplify the client-side scripting.
	
	

		
Carousel
		
A carousel is an amusement ride consisting of a rotating circular platform with seats.
	

Enfin vous activez le conteneur (via son id), vous lui mettez les options que vous voulez et le tour est joué:

$(document).ready(function() { 	

	// Configuration personnalisée
        $("#foo").carouFredSel({
		items				: 2,
		direction			: "up",
		scroll : {
			items			: 1,
			effect			: "easeOutBounce",
			duration		: 1000,							
			pauseOnHover	: true
		}					
	});	

        // Configuration  par défaut
       $("#foo2").carouFredSel();


});

Notez que vous pouvez déclarer plusieurs carrousels pour une même page, comme l'exemple précédent: nous avons déclaré un carrousel configuré manuellement représenté par l'id #foo, et un second configuré par défaut qui a l'id #foo2.

Site officiel (avec démo en bas de page)