BjCarousel — React
Composant React pour afficher un carrousel de contenu avec navigation, indicateurs et lecture automatique.
Utilisation
import { BjCarousel } from '@flrxnt/dsbj/react'
const slides = [
{ src: '/img/slide-1.jpg', alt: 'Photo 1', caption: 'Première diapositive' },
{ src: '/img/slide-2.jpg', alt: 'Photo 2', caption: 'Deuxième diapositive' },
{ src: '/img/slide-3.jpg', alt: 'Photo 3', caption: 'Troisième diapositive' },
]
function App() {
return <BjCarousel slides={slides} autoplay interval={3000} />
}Aperçu interactif
Props
| Classe | Description |
|---|---|
slides | Tableau d'objets { src, alt?, caption? } décrivant les diapositives. |
autoplay | Active la lecture automatique (défaut : false). |
interval | Intervalle en ms entre les diapositives (défaut : 5000). |
showIndicators | Affiche les indicateurs de position (défaut : true). |
showNavigation | Affiche les boutons précédent/suivant (défaut : true). |
className | Classe CSS additionnelle. |
onChange | Callback déclenché au changement de diapositive. Paramètre : { index, total }. |
renderSlide | Fonction de rendu personnalisé : (slide, index) => ReactNode. |
Accessibilité
Le carrousel possède
role="region" et aria-roledescription="carousel". Chaque diapositive est un role="group" avec aria-label. Navigation au clavier avec Flèche gauche et Flèche droite.