Carousel

Scroll-snap carousel. Native scrolling and swipe work with no JS; buttons, dots, arrow keys and optional autoplay are layered on top. Slides per view follow the container width.

Import

import { Carousel } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/carousel.

Usage

<Carousel
  label="Servicios destacados"
  loop={false}
  autoplay={false}
  showDots
  showArrows
/>

Props

Prop	Type	Default	Description
children *	ReactNode
label *	string		Accessible name of the carousel.
slideClassName	string	"basis-full @lg/carousel:basis-1/2 @3xl/carousel:basis-1/3"	Classes for each slide’s width. Default: 1 per view, 2 from 32rem, 3 from 48rem.
loop	boolean	false	Wrap around at the ends.
autoplay	number | boolean	false	Opt-in autoplay: interval in ms (true = 5000). Never runs under prefers-reduced-motion.
showDots	boolean	true
showArrows	boolean	true

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Autoplay
• Narrow
• Brutal Preset
• Glass Preset

Source

packages/ui/src/containers/carousel/carousel.tsx