# Carousel
> Generated from carousel.contract.json — do not edit by hand.

A swipeable set of slides — onboarding, a feature tour, a gallery — rendered through the shared Carousel.

Tier: **composite-antd**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `autoplay` | boolean | `false` | Advance slides automatically |
| `dots` | boolean | `true` | Show the position dots |
| `dotPosition` | top | bottom | left | right | `bottom` | Where the dots sit relative to the track |
| `effect` | scrollx | fade | `scrollx` | Slide transition style |
| `arrows` | boolean | `false` | Show prev/next arrows |
| `afterChange` | (current) => void | `—` | Fires after the active slide changes |

## Visual standard (measured)
- Slide: radius 8 · brand-tint #F9F5FF panel
- Active dot: brand #6A1EBB, wider (28px)
- Rest dot: 16×4, gap 8
- Dot position: bottom (default) · top · left · right
- Effect: slide (scrollx, default) · fade
- Arrows: opt-in prev/next via the arrows prop
- Motion: antd's built-in slide/fade transition (kept)
- Autoplay: opt-in via the autoplay prop

## When to use
- **Carousel** — a small, ordered set of equally-weighted panels the user can browse at their own pace
- **Tabs** — named sections the user jumps between directly, not in sequence
- **Steps** — a linear process with a clear start and finish

Keep it to a handful of slides and always show the dots so people know there is more. Autoplay only for ambient galleries — never for content people need to read.