J’ai eu à utiliser le plugin scrollable de la librairie JQuery Tools (basé sur JQuery comme son nom l’indique). Voici un petit « tutoriel / retour d’expérience » sur ce plugin très sympathique et bien fait.

Code Html

le diaporama doit être un conteneur (div dans notre exemple) qui contient un div ayant pour class items (valeur par défaut qui peut être modifiée). Chaque bloc contenu dans cette div correspondra à un slide du diaporama.

  

    
content here ...
    
content here ...
  


 «
»

Les éléments ayant pour class prev et next permettront respectivement le passage au slide précédent et suivant.

Code CSS

Il faut adapter le design du slider pour par exemple dans le cas d’un slider horizontal afficher les slides les un à coté des autres.
Je vous laisser regarder le partie css sur le site qui est bien faite avec notamment un fichier css par défaut pour le mode horizontal.

Code JavaScript

Le code afin de créer le diaporama est très simple :

$('#scroller').scrollable();

Le diaporama est alors créer en utilisant les valeurs par défaut des différents paramètres possible.

initialisation

Voyons comment modifier les paramètres de la classe du conteneur des slides ainsi que la durée de l’animation. Il s’agit des paramètres items et speed. Le code devient ainsi :

$('#scroller').scrollable({items : 'maClass', speed : 1000});

Une option sympathique désactivé par défaut est l’option circular qui permet au diaporama de tourner en boucle.

$('#scroller').scrollable({circular : true});

il est également possible de passer le diaporama en mode vertical via la propriété booléenne vertical.

Défilement automatique

Il est également possible d’activer le défilement automatique. Il faut utiliser le « sous-plugin » Autoscroll. La paramètre autoplay permettant de lancer la lecture de manière automatique

$('#scroller').scrollable().autoscroll({ autoplay: true });

Fonction de easing

Il également possible de modifier la fonction de easing (fonction qui modifie l’animation en fonction du temps, de la position de départ et d’arrivée ainsi que la durée de l’animation pour avoir des animations plus réelle). Le plugin est compatible avec le plugin JQuery Easing qui propose ces équations prête à l’emploi. Pour cela, il suffit d’inclure le fichier js du plugin et de spécifier la fonction d’easing à utiliser.

$('#scroller').scrollable({easing:"easeInBounce", speed : 1000);

Navigation

Il est également possible de mettre en place une navigation via le sous plugin navigator qui va générer automatiquement autant de lien de navigation qu’il y a de slides. Le paramètre indexed permet d’afficher le numéro de la slide.

$("#scroller").scrollable({easing:"easeInBounce", speed : 1000, circular:true}).navigator({indexed : true});

Les liens de navigation sont par défaut créé dans un conteneur ayant pour classe navi

Modification d’une valeur d’un paramètre après initialisation

Il est possible de modifier la valeur d’un paramètre de la configuration du diaporama. Pour cela, on récupère la configuration via l’API (.data(« scrollable »).getConf()) et on modifie le paramètre voulu. Voici un exemple où on modifie la fonction de easing :

$("#scrollable").data("scrollable").getConf().easing = "easeOutBounce";

Je vous invite à consulter la documentation qui est très bien faite.

Pour finir, voici un petit exemple de ce qu’il est possible de faire avec ce plugin. Il est possible de modifier l’effet de easing afin de trouvez celui qui vous convient le mieux 😉