# antuikit / Carousel

> Carousel. Adds nothing beyond `className` merging through `cn()`.

Docs: https://antuikit.com/docs/components/carousel

## Install

npx antuikit@latest init
npx antuikit@latest add carousel

## Import

import { Carousel } from "@/components/ui/carousel";

## Demos

- [Basic](https://ui.antuikit.com/embed/carousel/basic.md): Put one `div` per slide inside `Carousel` and give each a height, here full-width photos with `arrows` on the sides.
- [Arrows](https://ui.antuikit.com/embed/carousel/arrows.md): Set `arrows` to show previous and next buttons, and `infinite={false}` to stop at the first and last slide.
- [Fade](https://ui.antuikit.com/embed/carousel/fade.md): Set `effect` to `fade` to cross-fade between slides in place instead of sliding them.
- [Dot placement](https://ui.antuikit.com/embed/carousel/dot-placement.md): Set `dotPlacement` to move the dots to any edge, and `start` or `end` also turns the carousel vertical.
- [Autoplay](https://ui.antuikit.com/embed/carousel/autoplay.md): Pass `autoplay` an object with `dotDuration` to fill the active dot as a progress bar, and `autoplaySpeed` to set the interval.
- [Multiple slides](https://ui.antuikit.com/embed/carousel/multiple-slides.md): Set `slidesToShow` to show several slides at once and `slidesToScroll` to choose how many each step moves.
- [Centered mode](https://ui.antuikit.com/embed/carousel/centered-mode.md): Set `centerMode` to center the active slide with its neighbors peeking in, and `centerPadding` for how much of them shows.
- [Responsive slide count](https://ui.antuikit.com/embed/carousel/responsive.md): Pass `responsive` a list of breakpoints to show fewer slides as the window gets narrower.
- [Custom controls](https://ui.antuikit.com/embed/carousel/imperative.md): Call `next`, `prev` and `goTo` on the carousel's `ref` to move it from your own buttons.
- [Photo gallery](https://ui.antuikit.com/embed/carousel/photo-gallery.md): A photo gallery whose thumbnail row moves the main carousel with `goTo` and follows it through `afterChange`.
- [Testimonials](https://ui.antuikit.com/embed/carousel/testimonials.md): A testimonial rotator on the page background, with the dots recolored so they show on a light slide.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/carousel`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Carousel` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.