Image Slider avec Cycle jQuery

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

Le utilise le plugin 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

A voir aussi

  • micavril1

    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

    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

    Merci beaucoup!

  • Ali

    Bonjour,
    Avant de commencé, je tiens à vous féliciter pour votre site web, très bien expliqué et bien organiser Great Job !
    Je suis un petit webmaster sans connaissance particulière (Les base Php/Html/Css)
    Et j’aurais voulu savoir, dans les fichier .js où puis-je modifié le temps de la barre de progression ?
    J’aimerais quel soit plus rapide …
    Merci d’avance,
    A Plus

  • Ali

    Re: Trouvé
    Escusez-moi, j’ai trouvé c’est à la ligne 11 : slideTimeout: 4000,

    Désolé, du dérangement :)

Réseau

Sites