21
SEP

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

Publié le 21/09/10 à 09h48 par Sybio

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 !

 

Carrousel et 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)

Baraguiné par fbwebm le 21/09/10 à 12h55
fbwebm sur La Ferme du Web
Lol, j'ai l'impression de voir toujours le même de type de script même si c'est sympa !!! ... :p :p :p

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web