Brickslab.Toolsv2.1.1

@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.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  items={[]}
  currentIndex={0}
  onNext={...}
  onPrev={...}
  showDots={true}
/>
itemscurrentIndexonNextonPrevshowDots

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
    />
  );
}