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 ;-)
Avis des apprenants