Elastislide – Un carousel jQuery “responsive”

Elastislide est un plug-in servant à réaliser un carousel jQuery. Sa particularité est d’être “responsive design ready”, c’est à dire qu’il s’intégre sans problème à un site au design adaptatif. Il adapte ses dimensions et son comportement afin de fonctionner sous n’importe quelle résolution d’écran; sa largeur est fluide s’il est placé dans un conteneur de largeur fluide.

Cerise sur le gâteau : Elastislide utilise le plug-in jQuery Touchwipe, ce qui permet de faire défiler le carousel de manière tactile sur votre iPhone, iPad ou iPod Touch ! Ou plus globalement sur tous les appareils tactiles, ne soyons pas sectaires 🙂

Voici un exemple de code HTML pour mettre en place ce carousel :

<div id="carousel" class="es-carousel-wrapper">

  <div class="es-carousel">

    <ul>
      <li><a href="#"><img src="images/medium/1.jpg" alt="image01" /></a></li>
      <li>...</li>
      ...
    </ul>
  </div>

</div>

Chaque élément de notre carousel jQuery sera une balise <li> faisant partie d’une liste non-ordonnée <ul>.

Et voici l’appel jQuery pour déclencher le carousel :

$('#carousel').elastislide({
 imageW : 460,
 minItems : 3
});

Ici, l’option imageW correspond à la largeur des éléments du carousel. Quant à minItems, cette option va garantir d’afficher au moins 3 éléments à l’écran. Si la largeur de l’écran devient insuffisante, alors le carousel se redimensionnera afin de pouvoir afficher ces 3 éléments.

D’autres options sont disponibles : la vitesse de défilement, les marges, bordures, fonction callback… Pour en savoir plus et télécharger les sources, rendez-vous sur le site du plug-in !

Démo
Site du plug-in