--- title: "Carousel" type: component version: "2.2.2" doc_version: "2.7.3" status: stable date: 2026-07-05 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "JS-free Tailwind CSS Carousel using CSS scroll-snap. Touch-enabled with navigation controls and indicators for image galleries and content sliders." url: https://frutjam.com/fr/components/carousel --- # Carousel Component Les composants du carrousel affichent plusieurs éléments dans un conteneur rotatif ou déroulant, idéal pour présenter des images, des témoignages, des galeries de produits ou du contenu en vedette. Construits avec du HTML sémantique et un comportement de défilement fluide, les carrousels prennent en charge les mises en page horizontales et verticales avec un alignement instantané. Le système de carrousel Frutjam est parfait pour les sections de héros, les galeries de produits, les affichages de témoignages et les curseurs de contenu. CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile. | Classe | Taper | Description | | ----------------- | ------------ | ---------------------------------------------------------------- | | carousel | Base | Conteneur à défilement horizontal avec comportement d'accrochage | | carousel-item | Modificateur | Diapositive individuelle à l'intérieur du carrousel | | carousel-vertical | Modificateur | Direction de défilement vertical | | carousel-center | Modificateur | Aligner l'alignement au centre de chaque élément | | carousel-end | Modificateur | Alignement instantané à la fin de chaque élément | ## Utilisation de base Créez un carrousel horizontal simple avec des éléments déroulants. ## Carrousel avec images Affichez des galeries d'images avec un défilement fluide et un dimensionnement réactif. ```html
Image 1
Image 2
Image 3
``` ## Centre du carrousel aligné Affichez les éléments du carrousel avec un alignement central et un espacement entre les cartes. ```html

Card 1

Featured product or content

Card 2

Popular selection

Card 3

Trending now

``` ## Carrousel vertical Créez un carrousel vertical pour faire défiler les éléments de haut en bas. ```html
Item 1
Item 2
Item 3
Item 4
``` ## Carrousel avec navigation Ajoutez des boutons pour la navigation manuelle entre les éléments du carrousel à l’aide de liens d’ancrage. ```html
``` ## Carrousel avec indicateurs de points Utilisez de petits boutons de badge comme indicateurs de navigation pour plusieurs éléments du carrousel. ```html
1 2 3 4
``` ## Aide JS et React Utilisez `createCarousel` depuis `frutjam/js` ou `useCarousel` depuis `frutjam/react` pour parcourir les diapositives par programme - respecte automatiquement `prefers-reduced-motion`.