Qu'est-ce que CSS Carousel Generator ?
Un carrousel CSS est un conteneur a defilement horizontal ou vertical dont les elements se positionnent par snap lorsque l'utilisateur fait defiler. Le CSS moderne (Chrome 135+) ajoute des boutons de defilement et marqueurs integres qui fonctionnent sans JavaScript, ainsi que des requetes scroll-state pour styliser l'element actuellement accroche differemment des autres. C'est une alternative native aux bibliotheques de carrousel JavaScript.
Réponse rapide
Construisez un carrousel CSS natif avec scroll-snap, boutons et marqueurs - pas besoin de JavaScript. Utilisez scroll-snap-type pour le comportement de snap, ::scroll-button() pour les fleches, ::scroll-marker() pour les points, et les requetes scroll-state(snapped: true) pour le style de l'element actif.
Last updated: 2026-05-28
Limites
- Les boutons de defilement (::scroll-button()) et marqueurs (::scroll-marker()) nécessitent Chrome 135+. Firefox et Safari ne les supportent pas encore.
- Les carrousels CSS ne peuvent pas avancer automatiquement, boucler infiniment ou gerer des comptes d'elements dynamiques sans JavaScript.
- Les requetes scroll-state font partie de la meme version Chrome 135+. Le support cross-navigateur nécessite un repli JavaScript.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Comment utiliser cet outil
- Choisissez la direction de la mise en page (horizontale ou verticale) et la largeur des elements.
- Definissez le comportement de snap et l'alignement - mandatory accroche chaque element, proximity accroche quand on est proche.
- Incluez optionnellement des boutons de defilement et des points marqueurs pour la navigation.
- Choisissez le balisage de liste accessible (ul/li) et le nombre d'elements pour la sortie de demonstration.
- Copiez le CSS et le HTML dans votre page. Ajoutez du contenu reel a chaque element du carrousel.
A quoi il sert
- Construire un carrousel d'images produit sans ajouter de bibliotheque JavaScript.
- Creer un rail de cartes pour des articles de blog ou des listes de type app store.
- Realiser une galerie d'images accessible avec defilement navigable au clavier et points de snap.