• A la une
  • Catégories
  • Dossiers
  • Rédacteurs
  • +

Slider : Créer et télécharger un " awesome slider " pour vos créations en CSS3 / Javascript

par Benjamin SANCHEZle 07/04/2011

Voici un tuto expliquant comment rendre fonctionnel un Slider, avec celui de Sébastien GABRIEL comme exemple, en utilisant du CSS3 pour simplifier le javascript.

Introduction

Dans ce tutoriel vous découvrirez comment intégrer un slider simplement en CSS3 et JavaScript, avec un timer pour les transitions.

Avec l'arrivée de Firefox 4, tous les grands navigateurs ont maintenant dans leur version la plus récente le support du CSS3. Pour fêter ça, je propose un petit tuto pour expliquer comment faire un slider avec le moins de javascript possible et du CSS3.

 Pour mon exemple (que vous pouvez essayer ici avec l'encart bleu et là sinon), nous allons utiliser un des slider les plus simple que je n'ai jamais intégré le slider de Sébastien GABRIEL, que vous retrouverez à cette adresse. Ma source est disponible en fin d'article, je conseille de la télécharger et de la suivre en même temps que l'article, les explications risquent d'être un peu faibles sinon.

Image slider

Voir la démo | Télécharger

Le Vif du sujet

Bon, première étape, on personnalise les textes, les images, puis on découpe le .psd. Ensuite, on intègre. Jusque là, facile.

HTML/CSS

Maintenant, un peu de réflexion: Comment gérer les images et leur déplacement? Et bien, nous allons créer une sorte de visionneuse, à partire d'un <ul>. Nous créons notre ul, lui donnont une taille suffisante, et nous mettons toutes les images (de bien jolis oiseaux fournis par GINET Vincent) dans des <li>. Il ne nous reste plus qu'à mettre les li en float, supprimer les margin/padding, et nous voilà avec une belle banderole. Pour ne voir qu'une seule image, on ajoute un mask avec un overflow:hidden; et le tour est joué.

Deuxième grande interrogation : comment changer l'image affichée? Et bien, nous allons décaler la banderole avec la propriété left, en fonction de la classe du slider ("image1", "image2", ...) pour afficher l'image désirée. Pour les transitions, nous utilisons les nouvelles propriétés du CSS3, à savoir transition-property et transition-duration.

Javascript

Et enfin, comment changer d'image ? Un bête timer javascript comme setInterval() ou setTimeout() fait très bien l'affaire. Il nous suffit de lui donner une fonction (par exemple une fonction pour changer la classe du slider, que nous apellerons changeImage), et un temps (en millisecondes) avant d'executer l'action. Ce qui nous donne, par exemple, setTimeout("changeImage()",1000);. Il nous reste plus qu'à faire en sorte que la fonction change d'image, et de gérer tout les cas possible (si nous avons atteint le bout de la banderole, on retourne au début, ...), et nous y sommes!

Le résultat est un slider avec le strict minimum en javascript, et modifiable simplement en CSS et HTML.

La source est disponible ici, et abondament commentée. Enjoy!

telecharger

Découvrez également 10 Slides de qualité pour animer vos Web design

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte

37Commentaires

  • Avatar_thumb
    Jonathan MENET

    le 07/04/2011 | #1

    Belle ressource, par contre il manque le côté CTA dessus. C'est un bien joli slider, mais il faudrait un petit truc en plus, genre résumé de l'article, etc ..

  • Avatar_thumb
    Lea M

    le 07/04/2011 | #2

    GÉNIAL ! C'est pile ce dont j'ai besoin! Quel fabuleux hasard =)

    • Avatar_thumb
      Bat Antoine

      le 07/04/2011 | #3

      Vraiment génial ce slide ! design, léger...
      Je vais certainement m'en inspirer !
      Merci pour cette ressource !

    • Avatar_thumb
      Benjamin SANCHEZ

      le 07/04/2011 | #4

      Content que ça plaise! Oui, effectivement, ce slide serais, à mon gout, plus sympa avec de nombreuses choses supplémentaires: l'encart présent uniquement lors du survol de la souris, le titre sur l'encart changeant avec les images, l'encart drag'n dropable, par exemple. Mais tout ça complexifiait le Javascript, et je voulais un javascript le plus simple possible. J'ai donc choisis de ne rien mettre de plus que le nécessaire.

    • Avatar_thumb
      uSx

      le 08/04/2011 | #5

      Basique, utile, je vais essayer de le modifier pour contenir du html au lieu d'images. Merci!

    • Avatar_thumb
      AG AlamedaGraphik

      le 08/04/2011 | #6

      un slider très utile et souple, excellent. Merci
      une remarque: la possibilité d'afficher un texte et ou un lien avec le slide de l'image serait un plus

    • Avatar_thumb
      EL

      le 09/04/2011 | #7

      Nice, thanks for th post

    • Avatar_thumb
      Mary Baum

      le 11/04/2011 | #8

      Merci beaucoup de St. Louis, MO USA!

    • Avatar_thumb
      Rob

      le 12/04/2011 | #9

      Great slider! Thanks for sharing!

    • Avatar_thumb
      olivia

      le 18/04/2011 | #10

      bien joli comme effet JS, belle mise en valeur avec le petit ombré interne pour donner du volume

    • Avatar_thumb
      Mathieu Loubière

      le 17/05/2011 | #11

      bonjour Benjamin !
      j'ai une question .
      j'aurais souhaité utiliser les images du slider comme des liens de façon à ce que lorsque l'on clique sur une des images , cela nous renvoie vers une autre page ...
      Je n'y arrive pas...
      Merci d'avance pour ton aide .. ! ;)

    • Avatar_thumb
      Sami Hakou

      le 20/05/2011 | #12

      Merci pour le jolie tuto et la ressource ;).
      Trop beau slider! c'est exactement sque j'ai besoin :).

    • Avatar_thumb
      Zoliobi

      le 07/06/2011 | #13

      Bonjour, Encore merci pour ce très joli slideshow, j'ai juste un ptit soucis pour le faire fonctionner sous IE, l'effet de transition ne s'effectue pas. Quelqu'un a une idée ? Merci d'avance.

    • Avatar_thumb
      henry8

      le 22/07/2011 | #14

      Bonjour Joli travail. C'est vraiment impressionnant comme boulot. J'aimerais te demander comment faire pour pouvoir insérer ddu texte sur chaque image genre résumé de l'article par exemple. Merci de ton aide

    • Avatar_thumb
      Micha ROSS

      le 28/07/2011 | #15

      Superbe, mais ça ne glisse pas sous IE8 par exemple, ça change l'image simplement...
      Comment faire ?

    • Avatar_thumb
      Candice

      le 09/09/2011 | #16

      Bonjour, bravo c extra. Mais comment faire pour ajouter plus d 'image. Merci.

    • Avatar_thumb
      Benjamin SANCHEZ

      le 14/10/2011 | #17

      Excusez moi pour le temps mis pour répondre ^^.

      @mateomania l'effet de "vitre" sur l'image est une div par dessus. Elle est là pour respecter la maquette originelle, mais peux bloquer pour mettre un lien sur les images. La manière la plus simple de faire ce que tu veux est de supprimer la vitre et de mettre les images dans des a. Si tu veux faire quelque chose de mieux, en gardant la vitre, il te faudra du JS.

      @Zoliobi, @metis: C'est un slider CSS3, donc il faut un navigateur compatible CSS3. Si un navigateur compatible ne fonctionne pas, il suffit d'ajouter le code de transitions de ce navigateur dans le CSS, avec les autres. je modifierais la source.

      @candice Ajoute simplement une li dans le ul, avec une image dans le li.

    • Avatar_thumb
      Bnji

      le 16/10/2011 | #18

      Bonsoir, Je tente de modifier le format de ce slider pour l'adapter à mon site, mais il m'affiche joyeusement une pancarte bien trop grande.. La question qui tue, comment réduire son format? D'avance merci.

    • Avatar_thumb
      Benjamin SANCHEZ

      le 17/10/2011 | #19

      @Bnji: Réduire son format n'est pas aussi simple que changer juste un chiffre, malheureusement... fouille un peu dans le CSS pour diminuer la taille de la "vitre", ainsi que celle du cadre, met lui des images plus petites, et regarde déjà ce que ça donne. Le js vas lui s'adapter sans que tu n'ai besoin de toucher quoi que ce soit, donc tu peut limiter ta recherche au CSS.

      Si tu n'a pas la moindre connaissance en CSS/HTML, je suis désolé, mais cet article se destinait plus aux gens ayant déjà des notions d'intégrations, le slide est donc plus une illustration du tutoriel qu'une ressource abordable. Je suis sur que tu trouvera un bon slide bien plus complet en flash.

    • Avatar_thumb
      Bnji

      le 17/10/2011 | #20

      Bonjour Benjamin, Merci de ta réponse, je m'y recolle... @+

    • Avatar_thumb
      Danou

      le 16/11/2011 | #21

      Cc moi j'adore ton slider il est nikel mm en temps que débutante il est simple a comprendre seul problème j'ai ajouter plus de 4 images et plus de bouton, sauf que ça ne marche pas y a t-il quelque que chose qu'il faut ajouter au niveau du javascript ?? Merçi

    • Avatar_thumb
      Benjamin SANCHEZ

      le 16/11/2011 | #22

      @Danou. Oui, au tout début du javascript, j'ai laissé des variables, dont "maxImages". Met ici le nombre total de tes images. Je ferais peut être une version un peu plus complete de ce slider, dans pas tres longtemps...

    • Avatar_thumb
      Seb

      le 23/12/2011 | #23

      Merci bien pour cette ressource, juste besoin d'un petit conseil, comment on peux rajouter des urls sur les images svp ?

    • Avatar_thumb
      Alex

      le 12/01/2012 | #24

      Déjà merci beaucoup pour cette ressource. J'ai une question. Un peu plus pointu que celle de Bnji mais dans le même style. Je voulais donc l'adapter à mon site. Aucun problème, je l'ai mis à la taille que je voulais. En revanche lorsque je change de résolution j'aurai voulu que ce slid garder une "proportion" par rapport a mon site en augmentant ou diminuant. Possible, impossible ? Merci

    • Avatar_thumb
      Alain

      le 23/01/2012 | #25

      Salut !! Alors pour commencé je suis vrèment un debutant, Vous pouviez m'explique comment changer d'image ect... Et quel logiciel i faut SVP

    • Avatar_thumb
      Romain

      le 26/02/2012 | #26

      Petit tuto bien pratique. J'aimerais savoir quel est la fonction à modifier pour qu'à la dernière image la boucle continue sur la 1er image, mais ne remonte pas l'ensemble des images à l'envers pour repartir. Merci d'avance

    • Avatar_thumb
      Justin Rab

      le 28/02/2012 | #27

      Sa tome a pique que je tombe dessus. Merci bien.

      • Avatar_thumb
        karinSpace

        le 15/03/2012 | #28

        Petit mot pour ceux qui auraient eu envie de mettre un lien sur les images... Il faut enlever #glass{ position:absolute; top:0px; left:0px; } dans le CSS et c'est tout bon. Bonne intégration à tous, k

      • Avatar_thumb
        Hidrofyse

        le 28/03/2012 | #29

        Merci super slider =) Mais j'ai une question quand je change mes images tous va bien jusque à la 4 qui n'apparait pas. Que faire ?

      • Avatar_thumb
        Chiara

        le 16/05/2012 | #30

        Bravo! é molto buono!

      • Avatar_thumb
        Ilianna

        le 09/06/2012 | #31

        Salut, J'ai employé ta ressource pour agrémenter mon header. J'ai donc du rétrécir le slider et retoucher l'image glass. Mon problème se situe au niveau des dot.png (Il y a un point noir qui s'affiche en plus des images) et le fait que les images qui glisse dans le slider ne le remplisse pas entièrement. J'ai fait en 900 * 217 px

      • Avatar_thumb
        Ilianna Aliya

        le 09/06/2012 | #32

        Salut,

        Je ne sais pas si mon premier message est passé, je ne le vois pas affiché Oo

        Bref, je rencontre un soucis avec le slider. Pour les besoins de ma bannière ou je l'ai placée, j'ai réduit le slider, donc refait quelques images pour avoir un format 900 X 217 pixels. Mon soucis se situe au niveau des dot.png qui affiche sur le slider des points noir que je ne sais pas d'où sa sort et des images qui se glisse dans le slider qui ne prend pas toute la place. ll y a un trou d'environ 25 pixels.

        Un moyen de réparer sa??

        Je suis assez nul en se qui touche le js ^^''

      • Avatar_thumb
        Nicolas

        le 09/06/2012 | #33

        Excellent tuto avec code javascript simple pour ceux qui ne connaissent pas trop comme moi, un grand merci , depuis le temps que je cherchais comment faire un slider, je pense être tombé sur le bon tuto !

      • Avatar_thumb
        Christian

        le 27/10/2012 | #34

        Bonjour, merci pour ce slider, mais voilà je rencontre un petit problème. J'ai rajouté des images, de 4 à 6, modifié le maximages à 6, rajouté les <li> et dans le fichier CSS rajouté les 2 class .image?#image_container avec le %. Jusque là tout fonctionne, mais quand j'ai encore rajouté 3 images (de 6 à 9) et fait les modifications, les 3 dernières images n'apparaissent pas la fenêtre reste vide . J'ai vérifié l,adresse des images plusieurs fois (c,est bon) . Alors y aurait-il une limite d'images ? ou une autre modification à faire ?

      • Avatar_thumb
        Chriss

        le 27/10/2012 | #35

        re, j,ai trouvé mon erreur, j'avais oublié de modifié la largeur dans #image_container width:600%; à width:900%; encore une fois merci pour ce slider tout simple, juste ce qu'il me fallait.

      • Avatar_thumb
        Soulouf Haha

        le 21/12/2012 | #36

        Bonjour,

        C'est quoi le code source qui nous permet d'afficher les boutons ???
        Faites moi juste une copier/coller s'il vous plait lol

        Sinon est-ce possible de prendre le meme bouton que celle du demo ?? Cela m'interesse trop !

        Je vous remercie beaucoup pour ce super tuto !!!!!
        Et surtout merci a Seb !

      • Avatar_thumb
        lylie

        le 16/05/2014 | #37

        Merci pour ce tuto, le code est très bien expliqué, ça ma beaucoup aidée à comprendre comment ça marchait et j'ai réussi a la placer sur mon site. Merci beaucoup

      Ecrire un commentaire

      captcha

      Ouvrir