JavaScript moderne avancé - Apprendre à construire un Slider
Dans ce tutoriel 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.
- Durée de ce tuto: 2H16min
- Tarif de ce tuto: 26 €
- Date de ce tuto: 2022-11-04
Il y a actuellement 349 tutos
Il y a actuellement 23 bundles
