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 :

[pastacode lang= »markup » manual= »%3Cdiv%20id%3D%22carousel1%22%3E%0A%3Cul%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22img-1.jpg%22%20alt%3D%22%22%20%2F%3ELorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22img-2.jpg%22%20alt%3D%22%22%20%2F%3ELorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22img-3.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22img-4.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22img-5.jpg%22%20alt%3D%22%22%20%2F%3ELorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22img-6.jpg%22%20alt%3D%22%22%20%2F%3ELorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%24(function()%7B%0A%09%24(‘%23carousel1’).infiniteCarousel()%3B%0A%7D)%3B%0A%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

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 :

[pastacode lang= »javascript » manual= »%24(‘%23carousel’).panelGallery(%7B%0AtransitionSpeed%20%3A%202000%2C%0AdisplayTime%20%3A%2010000%2C%0AtextholderHeight%20%3A%20.25%2C%0AdisplayProgressBar%20%3A%200%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]

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

Bon code à tous 🙂