Print It!
Premiers pas sur le langage JavaScript
Projet 8 de la formation "Développeur WordPress" d'OpenClassrooms
Détails du projet
En tant que débutant dans le domaine du développement Front-End en freelance, je suis contacté par une petite imprimerie familiale du nom de Print It.
Ceux-ci souhaitent dynamiser leur site Internet statique grâce à un carrousel.
Je reçois un e-mail de la part de Lucien Gérodo avec des instructions pour réaliser ce carrousel.
Tout au long de ce projet, je ferai régulièrement des commits GitHub pour garder une trace de mon avancement et pouvoir revenir en arrière si nécessaire.
Processus de réalisation du projet
Pour réaliser un carrousel dynamique, je vais tout d’abord commencer par ajouter des flèches qui me permettront de gérer la navigation entre les différentes images du carrousel.
Je vais ajouter des event listeners à mes flèches pour qu’elles puissent gérer le changement des images du slider.
Pour savoir où l’utilisateur se trouve sur le slider en temps réel, nous allons ajouter des bullet points à celui-ci, qui annoteront le slide qui est actif.
Maintenant que nous avons tous les éléments nécessaires à la navigation dans le slider, nous allons pouvoir ajouter les images à celui-ci.
Pour se faire, il va dès lors importer les images de notre tableau JS.
Je vais tout d’abord commencer par créer des constantes qu’on écoutera pour agir dessus et créer notre ajout d’image et les interactions avec celles-ci.
Puis, on va faire en sorte que la flèche suivante, si on arrive à la dernière image, nous ramène au début, et inversement pour la flèche précédente.
Enfin, pour finaliser le carrousel, il faut gérer le retrait de la classe « dot_selected » à l’image précédente et ajouter le dot à l’image en cours de visionnage.
Langages utilisés
