Elastislide - Un slider d'images élastique en responsive webdesign

Elastislide est un slider / carousel jQuery avec une dose de design responsive pour s'adapter aux différentes résolutions.

Après le plugin de texte réactif et les vidéos réactives, voici le slider réactif basé sur le concept de webdesign responsive.

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.

Embarquant directement le plugin jQuery Touchwipe, Elastislide permet de réagir au glissé du doigt sur les terminaux mobiles tactiles, pratique !

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/medium/1.jpg" alt="image01" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/medium/2.jpg" alt="image02" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/medium/3.jpg" alt="image03" />
                </a>
            </li>
            <li>...</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.

Sympa non ?

Site Officiel

Pour aller plus loin dans le Responsive Webdesign

• Texte réactif
• Images en responsive
• Vidéos redimensionnées automatiquement
• Template Wordpress gratuit Responsive Webdesign
• Inspiration avec 70 exemples de responsive webdesign