fma-ds

Carousel

A carousel for cycling through slides (images, cards, or any content) with keyboard, swipe, and button navigation.

Data displaycustomizedMITChangelogRegistry JSON

Overview

Built on embla-carousel-react; CarouselPrevious/CarouselNext are Buttons wired to the carousel API.

  • Autoplay: autoplay (true or { delay }, 5000 ms by default) advances on its own and wraps to the first slide. Rotation pauses while the pointer is over the carousel or focus is inside it, and starts paused under reduced motion.
  • `CarouselAutoplayToggle`: pause/resume — required for moving content by WCAG 2.2.2; a dev warning flags its absence.
  • `CarouselDots`: one dot per slide; marks the current one and goes to a slide on press.
  • Announcements: slide changes are announced (aria-live) only when not rotating.

The toggle and dots are not positioned; place them where they fit.

Built-in labels are in English; translate them with i18n.labels.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/carousel

    Files land in components/fma-ds/carousel.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0embla-carousel-react@^8.6.0lucide-react@^1.61.0