JQuery – Plugin JQuery Infinite Carousel
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 :
<ul>
<li>
<img alt="" src="img-1.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img alt="" src="img-2.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img alt="" src="img-3.jpg" />
</li>
<li>
<img alt="" src="img-4.jpg" />
</li>
<li>
<img alt="" src="img-5.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img alt="" src="img-6.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
</ul>
</div>
Puis utilisez votre plugin de cette manière (par défaut) :
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 :
transitionSpeed : 2000,
displayTime : 10000,
textholderHeight : .25,
displayProgressBar : 0
});
Retrouver le plugin JQuery Infinite Carousel : ici
Exemples : 1 et 2
Bon code à tous 
J’ai enfin trouvé un Plugin Jquery permettant l’affichage d’un carousel en 3D!
http://application-net.fr/jquery-carousel-3d.html
Merci de nous faire partager cette découverte, qu’on peut aussi retrouver ici : http://www.professorcloud.com/mainsite/carousel.htm
Par contre ce n’est pas hyper fluide encore, c’est un bon plugin, avec une belle réalisation (et présentation), mais ce n’est pas encore assez ludique et fluide à mon goût.
Cependant, merci pour le lien et ce plugin qui j’en suis sûr, gagnera en optimisation dans quelques temps.
@+
[...] Infinite Carousel Je vous en parle ici Un effet de Carrousel pour vos images en jQuery. Le [...]