Cycle est un plugin pour JQuery créé par Mike Alsup. Il est très facilement configurable et permet de faire défiler des textes et images avec des effets de transition.
ce petit script d'a peine plus de 20ko :
- permet de faire défiler des images et des textes:
- avec de nombreux effet de transition (fondus, glissements, etc...)
- en intégrant des elements de navigation.
L'installation basique est simple.
On précharge d'abord la bibliotèque Jquery (ici à partir de google)
on charge ensuite la librairie JQuery cycle
dans le corps de la page on place les images qu'on veut voir défiler dans une balise DIV :
-
diaporama_simple">
-
on lance ensuite le script en le paramétrant avec l'ID du DIV contenant le diapora ma.
vous pouvez voir une démo Ici
Autres effets et navigation...
JQuery cycle propose de nombreux effets de transition dont on peu trouver la liste ici
de plus script peut recevoir de nombreux paramètres, on peut ainsi ajouter des liens de navigation (précédent suivant, numero des diapos) à notre diaporama.
On modifie le code du diaporama ainsi
-
diaporama_simple2">
-
-
-
-
navigation">
-
nav3">
- prev2" href="#">Précedent - next2" href="#">Suivant
on paramètre ensuite le script en lui indiquant des ID des liens de navigation.
une demo de cet exemple est disponible ici
Faire défiler autre choses que des images
on peut aussi faire utiliser Jquery cycle pour présenter autre chose que des image, un exemple est disponible ici.
Toutes les ressources
Télécharger jquery Cycle
exemples et documentation (en anglais)
Les exemples de cet article
