CarouFredSel, un carrousel circulaire en jQuery

28 décembre 2010

CarouFredSel est un plugin jQuery qui permet de mettre n’importe quel type d’élément HTML dans un carrousel circulaire qui boucle automatiquement. Plusieurs options sont configurables pour personnaliser le slider.

Un carrousel simple et complet

On retrouve toutes les fonctionnalités basiques d’un carrousel jQuery :

  • défilement horizontal ou vertical avec scroll d’un ou plusieurs items simultanément
  • défilement automatique, en fonction d’une durée, ou par interaction avec l’utilisateur (boutons, clavier)
  • redimensionnement automatique avec prise en charge des dimensions de l’item
  • compatibilité avec les principaux plugins jQuery de lightbox, notamment Fancybox

Un carrousel facile à utiliser

Contraitement à Nivo Slider et Slides, carouFredSel a la particularité de faire défiler n’importe quel type de contenu HTML, et pas seulement des images ! Voici un exemple d’utilisation avec du texte basique.

On commence par déclarer la bibliothèque jQuery et le plugin carouFredSel dans l’entête de votre fichier HTML.

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

Ensuite, on crée une « div » principale avec l’id « foo » qui va contenir les différents items à défiler. Ici, on utilise des « div » car nos items vont contenir plus d’un élément HTML : une balise « h3 » et une balise « p ». On peut donc se passer de cette « div » si on utilise une seule balise par item. C’est le cas pour un défilement d’images (succession de balises « img » dans la « div » principale).

<div id="foo">
	<div>
		<h3>Infinity</h3>
		<p>A concept that in many fields refers to a quantity without bound
 		or end.</p>
	</div>
	<div>
		<h3>Circular journey</h3>
		<p>An excursion in which the final destination is the same as the
		starting point.</p>
	</div>
	<div>
		<h3>jQuery</h3>
		<p>jQuery  is a cross-browser JavaScript library designed to simplify
		the client-side scripting.</p>
	</div>
	<div>
		<h3>Carousel</h3>
		<p>A carousel is an amusement ride consisting of a rotating circular
		platform with seats.</p>
	</div>
</div>

Puis, on termine par ajouter le script qui contient quelques paramètres de configuration.

$(document).ready(function() {
	$("#foo").carouFredSel({
		items				: 2,
		direction			: "up",
		scroll : {
			items			: 1,
			effect			: "easeOutBounce",
			duration		: 1000,
			pauseOnHover	: true
		}
	});
});

Et voilà, c’est terminé. Le carrousel est fonctionnel. Configurez et mettez en forme votre carrousel comme vous en avez envie ! Les différentes options sont à découvrir sur le site officiel.

Requis : jQuery
Démonstration : http://caroufredsel.frebsite.nl/
Licence : MIT/GPL

Commentaires

  • Percepto

    Bonjour et merci pour ce tuto, j’ai un soucis avec le internet explorer 8 et inferieur, il n’y a aucune animation et les images viennent l’une au dessous de l’autre. Y aura t-il une solution svp ? je n’utilise qu’une animation scroll.
    Merci d’avance