Dynamiser le carrousel du site

Contexte:

J’ai été missionné par l’imprimerie familiale « Print it » pour dynamiser le carrousel de leur site web. L’objectif était de rendre la navigation plus intuitive et d’améliorer l’expérience utilisateur.

Réalisations:

• Ajout de flèches de navigation:

J’ai intégré des flèches pour permettre aux utilisateurs de naviguer facilement entre les images du carrousel.

• Implémentation d’écouteurs d’événements:

J’ai ajouté des écouteurs d’événements aux flèches pour détecter les clics et changer l’image affichée en conséquence.

• Ajout de bullet points:

J’ai intégré des points sous le carrousel pour indiquer le nombre d’images et la position actuelle. Le point correspondant à l’image affichée est mis en évidence.

• Gestion du changement d’image:

J’ai développé une logique JavaScript pour gérer le changement d’image en fonction des clics sur les flèches. La boucle est gérée pour revenir au début ou à la fin du carrousel.

• Améliorations optionnelles:

J’ai pu proposer des améliorations supplémentaires, comme l’ajout d’effets de transition, de légendes pour chaque image et une adaptation du carrousel aux différents formats d’écran.

Résultats:

Le carrousel du site « Print it » est désormais dynamique et intuitif. Les utilisateurs peuvent naviguer facilement entre les images et visualiser l’ensemble des contenus du carrousel. Le site n’est pas responsive il est disponible en version desktop (ordinateur).

Compétences mises en avant:

• HTML
• CSS
• JavaScript