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

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 🙂

Author: Franck Pertegas

Share This Post On

3 Comments

  1. 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.

    @+

    Post a Reply
  2. Si on a un menu déroulant comment fait t’on pour qu’il s’affiche au dessu de infinitecarouse ? merci de vos reponse

    Post a Reply

Trackbacks/Pingbacks

  1. jQuery – 20 plugin jQuery à retenir | LudiBlog - [...] Infinite Carousel Je vous en parle ici Un effet de Carrousel pour vos images en jQuery. Le [...]
  2. 35 plugins jQuery rien que pour vos sites web ! | LudiBlog - [...] Infinite Carousel Je vous en parle ici Un effet de Carrousel pour vos images en jQuery. Le [...]
  3. 50 Plugins jQuery pour vos sites web ! | LudiBlog - [...] vous en parle ici Un effet de Carrousel pour vos images en jQuery. Le [...]
  4. Liste de tous les plugins jQuery testés sur le blog | LudiBlog - [...] Glisse Skitter Easy Image Zoom Zoomy Cycle Sponsor Flip Wall Easy Gallery ColorBox MaxImage JLoupe JQuery Infinite Carousel AnythingSlider…
  5. 62 plugins jQuery sur LudiBlog pour 2014 ! | LudiBlog - […] Glisse Skitter Easy Image Zoom Zoomy Cycle Sponsor Flip Wall Easy Gallery ColorBox MaxImage JLoupe JQuery Infinite Carousel AnythingSlider…

Submit a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *