Image Slider avec Cycle jQuery

tb-imagesliderVoici un tutoriel sympa présenté par Gaya Design sur un diaporama avec barre de progression.

Le slider utilise le plugin jquery Cycle qui permet des rotations d’images avec pas mal d’effets de transitions.

imageslider

La barre de progression est créée automatiquement et indique le nombre d’images à afficher.
Pas mal d’options sont disponibles comme la vitesse de défilement, les types de transitions.etc…

Vous trouverez plusieurs exemples dans la démo avec des barres de progression différentes.

Nécessite : jQuery, jQuery Cycle Plugin
Fonctionne avec la majorité des navigateurs web

Site Web : http://www.gayadesign.com/diy/presentation-cycle-cycle-with-a-progressbar/
Démo : http://www.gayadesign.com/scripts/presentationCycle/
Téléchargement : http://www.gayadesign.com/scripts/presentationCycle/presentationCycle.zip

BlogBang

A voir aussi

3 Responses to "Image Slider avec Cycle jQuery"

  • micavril1 02:21 22/1/2010

    Bonjour,
    Tout d’abord, félicitations pour votre site et blog, je suis webdesigner integrateur dans la region d’aix en provence!
    je prépare actuellement mon portfolio ou j’ai intégrer « image slider avec jquery »: http://www.webcssdesign.com/ajax/image-slider-avec-cycle-jquery/#more-1231
    Pouvez vous me donner votre avis sur la répétition des balises H1 dans son code; ainsi que le mauvais fonctionnement sur ce p…..!d’IE6.
    en vous remerciant.
    Bonne journée.

  • Admin 04:37 22/1/2010

    bonjour, pour les balises il est plutôt conseillé de mettre de balises h2 voir h3, h1 étant réservé au titre/logo de la page et utilisable une seule fois bien que certain soutiennent que l’on peut en mettre 2 par pages.
    Pour IE6 c’est toujours la même histoire, les gouvernements se mettent à prévenir du danger de son utilisation. Mieux vaut tard que jamais, alors encore un peu de patience on voit le bout du tunnel ;)

  • micavril1 05:14 22/1/2010

    Merci beaucoup!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>