## Carousel
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.
Default to the HTML snippet — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler.
Surfaces: editor, dashboard, audience.
Props:
- autoplay: boolean, default false. Advance slides automatically
- dots: boolean, default true. Show the position dots
- dotPosition: top | bottom | left | right, default bottom. Where the dots sit relative to the track
- effect: scrollx | fade, default scrollx. Slide transition style
- arrows: boolean, default false. Show prev/next arrows
- afterChange: (current) => void, default —. Fires after the active slide changes
Tokens: colorPrimary, borderRadius, Carousel.dotWidth, Carousel.dotHeight, Carousel.dotActiveWidth, Carousel.dotGap.
Use when: 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).