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 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) :

<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 :)

Comments
  1. Mickael
  2. LudiKadmin
  3. Tibou

Leave a Reply

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


*