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
Bonjour
Jquery Cycle est parfait au niveau des navigateurs mais dans l editeur html, les images apparaissent toutes et il devient difficile de travailler en wysiwig quand plusieurs images s'affichent en même temps ( ce qui disparait à lma publication sur le web).Y a t-il un moyen d'éviter celà ? Merci
bonjour,
je ne suis pas posé la question , mais peut être en rendant le conteneur transparent du coté style,
ou en travaillant avec une seul image pendant la phase de création graphique
Bonjour,
Dans le diaporama2, est-il possible de changer les chiffres 1,2,3 en bulletpoint? Peut-etre en modifiant « pager:’#nav3′ » dans le script non?