JavaScript moderne avancé - Apprendre à construire un Slider
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
2h16
de formation
24
leçons vidéo
5
chapitres
Intermédiaire
niveau requis
Carl Brison
Carl Brison
Formateur certifié

JavaScript moderne avancé - Apprendre à construire un Slider

4.8/5 Trustpilot (1399 avis) Satisfait ou remboursé
2h16
de formation
24
leçons vidéo
5
chapitres

Dans ce cours en ligne nous allons apprendre à monter un slider de A à Z.
Pour cela nous allons utiliser les langages informatiques suivants : HTML, CSS et JavaScript.
Pour le JavaScript, nous utiliserons le JS moderne.

Les caractéristiques de notre silder seront les suivantes :

  • Lorsque l'utilisateur passera le pointeur de sa souris sur le slider, alors on fera apparaître un chevron droit ainsi qu'un chevron gauche. Ces chevrons permettront d'afficher l'image suivante ou bien l'image précédente sur un simple clic.
  • Lorsque l'utilisateur sera arrivé à la dernière image, alors on lui affichera la première image.
  • Lorsque l'utilisateur sera sur la première image et qu'il cliquera sur le chevron précédent, alors on lui affichera la dernière image.
  • Nous allons également créer une seconde navigation à notre slider. Cette nouvelle navigation se fera au travers de petits cercles.

Chaque cercle représentera une image.

  • Le cercle 1 représentera l'image 1.
  • Le cercle 2 représentera l'image 2.
  • etc...

Si l'image 1 est affichée, alors seul le cercle 1 sera actif. Si l'image 2 est affichée, alors seul le cercle 2 sera actif.
Chaque cercle sera cliquable.
A la fin de ce tutoriel avancé, vous serez en mesure de développer vos propres sliders.

Je mets l'ensemble des codes à votre disposition.
Si vous voulez devenir incollable en JavaScript moderne, voici un tutoriel complet de près de 14H ;-)

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Incrémentation et décrémentation du slide
Chapitre 2
Création d'un slider
Chapitre 3
Mise en place d'une seconde navigation
Chapitre 4
Amélioration de notre slider
Chapitre 5
Conclusion

Table des matières

Chapitre 1 : Incrémentation et décrémentation du slide

55m53
 
Leçon 1Mise en place des bases HTML et CSS
Leçon 2Changer d'image au clic sur le bouton droit
Leçon 3Dynamiser le changement d'images
Leçon 4Gestion de la dernière image
Leçon 5Changer d'image à l'initial, au clic sur le bouton gauche
Leçon 6Dynamiser le changement d'image à l'initial
Leçon 7Capter que l'image affichée est bien la première image
Leçon 8Dynamiser la décrémentation
Leçon 9Test de notre programme

Chapitre 2 : Création d'un slider

22m29
 
Leçon 1Mise en place du code HTML
Leçon 2Superposition des chevrons
Leçon 3Mise en forme des chevrons
Leçon 4Liaison du slider avec le script JS

Chapitre 3 : Mise en place d'une seconde navigation

46m53
 
Leçon 1Mise en place des bases HTML et CSS
Leçon 2Automatiser l'affichage de la seconde navigation
Leçon 3Modifier la classe active sur clic du bouton droit
Leçon 4Modifier la classe active sur clic du bouton gauche
Leçon 5Suppression de la classe active
Leçon 6On active le span cliqué
Leçon 7On affiche la bonne image
Leçon 8On modifie la valeur de n

Chapitre 4 : Amélioration de notre slider

08m03
 
Leçon 1Mise en place des bases HTML et CSS
Leçon 2Intégration du nouveau script

Chapitre 5 : Conclusion

02m51
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
8
Commentaires
5/5
Note moyenne
5/5
8
4/5
0
3/5
0
2/5
0
1/5
0
Fred Andenas
Fred Andenas
Publié le 08/05/2026
Merci Carl pour cette présentation riche et complète sur les Sliders. Même si cette notion est complexe, on a une base intéressante pour revoir et mettre en application
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil,Fred ;-)
Simon Costa
Simon Costa
Publié le 17/01/2026
Cours très complet et qui embrouille le cerveau si on manque d'attention. Pouvoir créer un slider simple et esthétique à la fois, sa en jette pas mal. Cependant la rigueur est de mise pour tout piger.
Carl Brison
Carl Brison
Oui absolument ! Merci pour votre commentaire ;-)
Jean-Philippe Mouzet
Jean-Philippe Mouzet
Publié le 22/02/2025
Super intéressant pour mon futur site de photo.
Carl Brison
Carl Brison
Génial. Merci beaucoup pour votre commentaire

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Que contient le fichier source ?

Le code source des 4 chapitres

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
25,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
2h16 de vidéo • 5 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ 27,91€ /mois
Le 1er mois, puis 34,90€ - sans engagement
Cette formation + 6 790 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Profiter de l'offre
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données