Un slideshow en JQuery

Abonnez vous au flux RSS de ce blog et restez informé en continue !

Dans le cadre d’un projet, j’avais besoin de créer un slideshow avec un bouton avance rapide et un second pour revenir à l’image précédente. Deux possibilités s’offrait à moi : utiliser Flash ou une bibliothèque de type Web 2.0 (Mootools, JQuery, …).

Seulement voilà, n’ayant pas encore tous les supports à insérer, je souhaitais créer un slideshow qui me permettrait de le mettre à jour facilement. Autre argument de choix faire en sorte que les images puissent comporter un titre et une description pour que le référencement se face de manière naturelle par Google (code lisible).

En plus des boutons de navigation à mettre en oeuvre, il fallait insérer une description pour chaque image affichée. Celle-ci devant apparaitre en même temps que la photo. Voilà la maquette visuelle à mettre en place :

Maquette du slideshow (photo, boutons et texte)

Pour créer ce slideshow, j’ai utilisé jQuery Cycle plugin et c’est vraiment un plugin très intéressant puisqu’il permet de répondre aux différents points que je cherchais à mettre en oeuvre. En m’inspirant des exemples présents sur le site et en les adaptant, j’ai construis le Slideshow du projet.

Les effets présents sur le site jQuery Cycle plugin sont vraiment très intéressants pour rendre plus vivant vos pages web ou vos portfolios et ils sont tous commentés pour que vous puissiez les adapter.

Voir mon slideshow.