26,00

Tuto JavaScript moderne avancé - Apprendre à construire un Slider avec JavaScript, CSS

26,00

  • Une formation vidéo de 2h16m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
JavaScript moderne avancé - Apprendre à construire un Slider

ajouter ce cours aux favoris retirer ce cours des favoris

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 ;-)

Table des matières de cette formation JavaScript, CSS (durée : 2h16m)

  • Incrémentation et décrémentation du slide
    • Mise en place des bases HTML et CSS 00:09:21
    • Changer d'image au clic sur le bouton droit 00:05:43
    • Dynamiser le changement d'images 00:09:00
    • Gestion de la dernière image 00:08:10
    • Changer d'image à l'initial, au clic sur le bouton gauche 00:04:14
    • Dynamiser le changement d'image à l'initial 00:05:10
    • Capter que l'image affichée est bien la première image 00:05:38
    • Dynamiser la décrémentation 00:05:18
    • Test de notre programme 00:03:19
  • Création d'un slider
    • Mise en place du code HTML 00:08:24
    • Superposition des chevrons 00:05:02
    • Mise en forme des chevrons 00:07:01
    • Liaison du slider avec le script JS 00:02:02
  • Mise en place d'une seconde navigation
    • Mise en place des bases HTML et CSS 00:05:39
    • Automatiser l'affichage de la seconde navigation 00:07:29
    • Modifier la classe active sur clic du bouton droit 00:07:11
    • Modifier la classe active sur clic du bouton gauche 00:05:57
    • Suppression de la classe active 00:05:10
    • On active le span cliqué 00:06:26
    • On affiche la bonne image 00:03:18
    • On modifie la valeur de n 00:05:43
  • Amélioration de notre slider
    • Mise en place des bases HTML et CSS 00:04:48
    • Intégration du nouveau script 00:03:15
  • Conclusion
    • Conclusion 00:02:51



Formateur : Carl Brison

Carl Brison a publié 277 tutoriels et obtenu une note moyenne de 4,9/5 sur 17 652 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

2
avis laissés
5 étoiles
2
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 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
Parcours Developpeur Front End
accédez à plus de 1461 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données