Elastislide est un slider / carousel jQuery avec une dose de design responsive pour s’adapter aux différentes résolutions.
Pour créer des pages web responsive, il ne faut pas uniquement penser à la présentation, ajustable avec du CSS. Il faut aussi penser aux fonctionnalités, comme les sliders, slideshow, carousels…
Elastislide permet de résoudre cette problématique, et propose un carousel d’image redimensionnable suivant les dimensions du navigateur.
Côté code, voici ce qu’il faudra mettre en place en HTML:
<div id="carousel" class="es-carousel-wrapper">
<div class="es-carousel">
<ul>
<li><a href="#"><img src="images/Benodet_01.jpg" alt="Bénodet" /></a></li>
<li><a href="#"><img src="images/Benodet_02.jpg" alt="Bénodet" /></a></li>
<li><a href="#"><img src="images/Benodet_03.jpg" alt="Bénodet" /></a></li>
<li><a href="#"><img src="images/Benodet_04.jpg" alt="Bénodet" /></a></li>
</ul>
</div>
</div>
Puis activer le slider jQuery à l’aide de la commande suivante:
$('#carousel').elastislide({
imageW : 180
});Il sera possible de configurer directement les effets et vitesse de transition, le nombre de miniatures max et mini à afficher, et d’associer une fonction de callback lorsqu’un visiteur clique sur une des image.