Brickslab.

@brickslab/ui-web

Carrousel d'images contrôlé avec navigation précédent/suivant et indicateurs de position optionnels. L'index courant et les callbacks de navigation sont gérés par le parent.

Aperçu

carrousel avec showDots — 3 items (interactif)

currentIndex=0 / 2
Image de démonstration 1
Première diapositive — paysage naturel

sans dots

showDots=false (par défaut), currentIndex=0
Image de démonstration 1
Première diapositive — paysage naturel

Props

PropTypeDéfautRequisDescription
itemsCarouselItem[]—✓Tableau des slides du carrousel. Chaque item contient src, alt et une caption optionnelle.
currentIndexnumber—✓Index du slide actuellement affiché. Composant contrôlé.
onNext() => void—✓Callback déclenché pour passer au slide suivant.
onPrev() => void—✓Callback déclenché pour revenir au slide précédent.
showDotsboolean——Affiche des indicateurs de position (points) en bas du carrousel.

Utilisation

tsx
import { MediaCarousel } from "@brickslab/ui-web";
import { useState } from "react";

const items = [
  { src: "https://picsum.photos/600/300?random=1", alt: "Slide 1", caption: "Première diapositive" },
  { src: "https://picsum.photos/600/300?random=2", alt: "Slide 2", caption: "Deuxième diapositive" },
  { src: "https://picsum.photos/600/300?random=3", alt: "Slide 3", caption: "Troisième diapositive" },
];

function Demo() {
  const [index, setIndex] = useState(0);

  return (
    <MediaCarousel
      items={items}
      currentIndex={index}
      onNext={() => setIndex((i) => (i + 1) % items.length)}
      onPrev={() => setIndex((i) => (i - 1 + items.length) % items.length)}
      showDots
    />
  );
}