# Carousel

> Scroll-snap carousel.

Source: https://ui.jcsoftdev.com/docs/components/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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/containers-carousel--default)
- [Autoplay](/storybook/?path=/story/containers-carousel--autoplay)
- [Narrow](/storybook/?path=/story/containers-carousel--narrow)
- [Brutal Preset](/storybook/?path=/story/containers-carousel--brutal-preset)
- [Glass Preset](/storybook/?path=/story/containers-carousel--glass-preset)

## Source

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