BjCarousel — Vue

Composant Vue 3 pour afficher un carrousel de contenu avec navigation, indicateurs et lecture automatique.

Utilisation

<script setup>
import { ref } from 'vue'
import { BjCarousel } from '@flrxnt/dsbj/vue'

const slides = ref([
  { 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' },
])
</script>

<template>
  <BjCarousel :slides="slides" />
</template>

Aperçu interactif

Première diapositive

Props

ClasseDescription
slidesTableau d'objets { src, alt?, caption? } décrivant les diapositives.
autoplayActive la lecture automatique (défaut : false).
intervalIntervalle en ms entre les diapositives (défaut : 5000).
showIndicatorsAffiche les indicateurs de position (défaut : true).
showNavigationAffiche les boutons précédent/suivant (défaut : true).

Événements

ClasseDescription
changeÉmis lors du changement de diapositive. Payload : { index: number, total: number }.

Slots

<BjCarousel :slides="slides">
  <template #slide="{ slide, index }">
    <div class="custom-slide">
      <h3>{{ slide.caption }}</h3>
      <img :src="slide.src" :alt="slide.alt" />
    </div>
  </template>
</BjCarousel>
ClasseDescription
slideSlot scopé pour personnaliser le rendu de chaque diapositive. Props : slide, index.

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.