JavaScript moderne avancé - Apprendre à construire un Slider
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO JavaScript moderne avancé - Apprendre à construire un Slider

Carl Brison
26,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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

Plan détaillé du cours

Chapitre 1 : Incrémentation et décrémentation du slide
55m53s
 
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
22m29s
 
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
46m53s
 
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
08m03s
 
Leçon 1Mise en place des bases HTML et CSS
Leçon 2Intégration du nouveau script
Chapitre 5 : Conclusion
02m51s
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
5
Apprenants
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 13/09/2023
Merci Carl, ce cours a été très instructif. Progressivement, la logique et le raisonnement permettent d'améliorer la construction de son code, ce qui nous permet de penser comme un développeur. Je vous remercie pour tous les bons conseils que vous avez fournis. Le slider est présent sur de nombreux sites, savoir le construire est un vrai plus.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire, Alain ;-)
Valérie Arno
Valérie Arno
Publié le 11/02/2023
Les explications sont parfaites comme d'habitude. On avance étape par étape pour assimiler progressivement les informations. Ce n'est pas facile et mon cerveau a eu du mal à suivre et à fumer un peu oui :-) Mais c'est intéressant de savoir ce qui se cache derrière un slider. Merci Carl et à bientôt.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaireValérie ;-)
Bernard Chabloz
Bernard Chabloz
Publié le 13/01/2023
Merci pour ce joli tuto! Ici, je n'ai pu m'empêcher d'anticiper, ce qui m'a permis de me tester, et ça a plutôt bien marché (sauf l'arrachage de quelques cheveux pour la flèche gauche, jusqu'à ce que je me rende compte de la nécessité de sortir les images non voulues...). Pour la boucle des clicks sur les ronds, indicer le tableau (plutôt que "span of spans") permet d'éviter le recours aux identifiants, l'indice permettant de mettre à jour le compteur.
Carl Brison
Carl Brison
Merci pour votre commentaire ainsi que pour vos précisions

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS 3

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Que contient le fichier source ?

Le code source des 4 chapitres

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données