Elastislide : un carousel jQuery réactif (Responsive Webdesign)

Le webdesign réactif (traduction approximative de Responsive Webdesign) est un ensemble de techniques permettant d’adapter la mise en page d’un site web selon le périphérique de l’utilisateur. Avec l’arrivée des Media Queries en CSS3, le webdesign réactif devient de plus en plus utilisé. Il manquait toutefois des carousels réactifs. C’est le cas de Elastislide qui profitera au mieux des caractéristiques de l’écran. Via @guerrier.

Le marquage 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>...</li>
        </ul>
    </div>
</div>

L’appel à jQuery

$('#carousel').elastislide({
    imageW : 180
});

Options de Elastislide

Elastislide propose les options suivantes pour adapter le carousel à vos besoins :

speed : 450,
// Vitesse de l'animation
easing : '',
// effet d'animation easing
imageW : 190,
// Largeur des images
margin : 3,
// Marge droite des images
border : 2,
// Bordure de l'image
minItems : 1,
//Nombre minimum d'élément à afficher.
//Lorsque la fenêtre du navigateur est modifiée,
//cette option fait en sorte que les éléments sont toujours montrés
//(sauf si le ninItems est plus élevé que le nombre total d'éléments)
current : 0,
// index de l'élément courant
// Lorsque la fenêtre des modifiée
// le plugin s'assure que l'élément est visible.
onClick : function() { return false; }
// Fonction de rappel sur l'événement click
// Exemple pour obtenir l'index de l'élément cliqué :
$('#carousel').elastislide({
    onClick : function( $item ) {
        alert( 'The clicked item´s index is ' + $item.index() )
    }
});