JQuery – Plugin JQuery Infinite Carousel

Posted By Franck Pertegas on 29 Oct 2009 in Framework, Javascript, Outils, Programmation | 3 comments

Jusqu’aujourd’hui nous avons fait la découverte de beaucoup d’éléments JQuery qui permettent de dynamiser votre site, JQuery-UI, ColorBox, JLoupe, MarkItUp! etc…

Et bien cette fois, nous allons étendre les possibilités avec un effet qui est très souvent recherché : « Un Carrousel« . Jusqu’à maintenant nous pouvions utiliser JCarousel, qui fonctionne toujours aussi bien et reste simple d’utilisation pour tout adepte de JQuery. Cependant, j’ai récemment découvert un autre plugin, qui reste agréable à utiliser et donne un effet plutôt joli.

Retrouvez donc le plugin JQuery Infinite Carousel.

JQuery Infinite Carousel

Son utilisation se fait ainsi :

Créez une structure avec vos éléments :

<div id="carousel1">
<ul>
 	<li><img src="img-1.jpg" alt="" />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 	<li><img src="img-2.jpg" alt="" />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 	<li><img src="img-3.jpg" alt="" /></li>
 	<li><img src="img-4.jpg" alt="" /></li>
 	<li><img src="img-5.jpg" alt="" />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 	<li><img src="img-6.jpg" alt="" />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>

Puis utilisez votre plugin de cette manière (par défaut) :

<script type="text/javascript">
$(function(){
	$('#carousel1').infiniteCarousel();
});
</script>

Et vous avez votre carrousel tout beau avec un effet pour les paragraphes et le défilement. C’est propre, c’est fluide.

Ce plugin est composé de plusieurs options :

• transitionSpeed – Le temps de transition entre 2 images (default 1500)
• displayTime – Le temps d’affichage de chaque image (default: 6000)
• textholderHeight – la hauteur de la légende. Il s’agit d’une fraction de la hauteur des images (default: .2)
• displayProgressBar – Boolean. Afficher ou non la barre de progression (default: 1)
• displayThumbnails – Boolean. Afficher ou non les vignettes pour le carrousel (default: 1)
• displayThumbnailNumbers – Boolean. Placer ou non automatiquement des numéros dans les cases d’image (default: 1)
• displayThumbnailBackground – Boolean. Utiliser ou non l’image comme arrière-plan correspondant pour une zone de l’image (default: 1)
• thumbnailWidth – la largeur de la box de chaque vignette (default: ‘20px’)
• thumbnailHeight – la hauteur de la box de chaque vignette (default: ‘20px’)\
• thumbnailFontSize – la taille de police le numéro dans la zone des miniatures (default: .7em)

Utilisation avec option :

$('#carousel').panelGallery({
transitionSpeed : 2000,
displayTime : 10000,
textholderHeight : .25,
displayProgressBar : 0
});

Retrouver le plugin JQuery Infinite Carousel : ici
Exemples : 1 et 2

Bon code à tous 🙂