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 !