Carousel

Bienvenue sur le projet Carousel ! Ce projet a pour but de vous présenter un carrousel simple et fonctionnel réalisé en HTML, CSS et JavaScript. Il utilise les propriétés CSS flexbox et translateX pour faire défiler les images horizontalement, et les boutons "Précédent" et "Suivant" pour contrôler manuellement le défilement. Il y a également une fonctionnalité d'auto-défilement avec des points de navigation pour passer d'une image à l'autre ainsi que le glisser pour defiler sur les smartphones.

Prérequis

Pour utiliser ce projet, vous avez besoin des connaissances de base en HTML, CSS et JavaScript.

Installation

Pour utiliser ce projet, veuillez cloner le repository Github sur votre ordinateur local et ouvrir le fichier index.html avec un navigateur web.

Structure du projet

Le projet est composé des fichiers suivants:

• index.html : Le fichier HTML principal qui contient le code HTML du carrousel
• style.css : Le fichier CSS qui contient la mise en forme du carrousel
• app.js : Le fichier JavaScript qui contient le code JavaScript du carrousel

Fonctionnalités

• Affichage des slides de manière continue et infinie
• Possibilité de naviguer entre les slides avec les boutons Précédent et Suivant
• Possibilité de naviguer entre les slides en cliquant sur les points (dots)
• Possibilité de naviguer entre les slides sur les smartphone en glissant sur les images
• Mise en pause du carrousel lorsque la souris se trouve sur un slide et reprise de la rotation lorsque la souris quitte le slide
• Temps de rotation réglable en modifiant la variable slideTimeout dans le fichier JavaScript

Utilisation

Clonez ce repository sur votre ordinateur. Ouvrez le fichier index.html avec un navigateur web. Vous devriez voir le carousel en action avec un bouton de navigation vers la gauche et un bouton de navigation vers la droite. Il y a également des points de navigation en bas du carousel pour naviguer entre les diapositives. Le carousel défile automatiquement toutes les 5 secondes. Vous pouvez mettre en pause le défilement en passant la souris sur le carousel.

Personnalisation

Vous pouvez personnaliser le carousel en modifiant les fichiers CSS et JavaScript.

Modifiez le fichier style.css pour changer la mise en page et les couleurs du carousel. Modifiez le fichier app.js pour changer la durée de l'intervalle de défilement, la logique de navigation, etc.

Conclusion

J'espère que ce projet vous a plu et vous a été utile. Si vous avez des suggestions ou des commentaires, n'hésitez pas à me les faire parvenir via Github. Merci d'avoir utilisé le projet Carousel !

Licence

Ce projet est sous licence MIT.