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
.
Pour utiliser ce projet, vous avez besoin des connaissances de base en HTML, CSS et JavaScript.
Pour utiliser ce projet, veuillez cloner le repository Github sur votre ordinateur local et ouvrir le fichier index.html
avec un navigateur web.
Le projet est composé des fichiers suivants:
index.html
: Le fichier HTML principal qui contient le code HTML du carrouselstyle.css
: Le fichier CSS qui contient la mise en forme du carrouselapp.js
: Le fichier JavaScript qui contient le code JavaScript du carrousel
- 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
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.
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.
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 !
Ce projet est sous licence MIT.