13
SEP

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

Publié le 13/09/11 à 09h27 par DJo

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

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.

Elastislide - Réagi à la dimension 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

Baraguiné par le 13/09/11 à 17h35
Bonjour,
N'y a t'il pas de plugin réagissant mieux au touché, comme le slider de la page d'accueil de yahoo ?
Elastislide, j'ai plus l'impression qu'il réagis sur un event à la direction prise, il exécute le slide, mais sans vraiment prendre en compte le fait qu'on le ne veuille pas faire un slide complet, etc. Mine de rien question impression de maitrise totale de l'action par le doigt, c'est moins bien !

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web