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.

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!

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