Carousel

A horizontal or vertical slide track with dots and optional arrows, for content the reader steps through one panel at a time.

Preview in Figma LLMs

Overview

Design

Code

Carousel is Ant Design's Carousel, installed into your project as a file you own. It takes the same props, merges className and forwards a ref. Its dots and arrows are CSS, so it needs no icon pack.

Carousel is built on react-slick and passes its settings through (slidesToShow, responsive, pauseOnFocus and the rest). The API table lists the props antd documents, and react-slick's docs cover the others.

Install

npx antuikit@latest init

npx antuikit@latest add carousel

The first command installs AntuikitProvider and the theme tokens. The second adds this component.

Import

Import from @/components/ui/carousel, not from antd. The file lives in your project once installed.

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

The axes

effect: scrollx (the default) or fade. A fade cross-fades in place, so every slide has to be the same size.
dotPlacement: top, bottom (the default), start or end.
dotPosition is deprecated and warns. Use start for left and end for right.
lazyLoad: ondemand, progressive or anticipated. Unset, every slide renders up front.

dotPlacement start or end makes the carousel vertical. Pass vertical={false} to keep side dots on a horizontal carousel.

Flags

Some defaults here are the opposite of react-slick's own docs.

dots defaults to true and arrows to false.
draggable defaults to false, so a mouse drag does nothing. Touch swiping (touchMove) is on.
waitForAnimate defaults to false, so a second click during a transition is not ignored.
autoplay defaults to false and also takes an object: { dotDuration: true } fills the active dot as a progress bar over autoplaySpeed.
infinite defaults to true. It copies the slides at both ends, so everything inside a slide exists more than once.
pauseOnHover is on and pauseOnFocus is off, so autoplay stops for a mouse and not for a keyboard.
accessibility (on) adds arrow-key handling that only works while something inside a slide has focus. See the Accessibility tab.
adaptiveHeight, centerMode, variableWidth, swipeToSlide and focusOnSelect default to off.

Slots

The props that take your markup. Reach for them before a descendant selector.

children: one slide per direct child. Wrap each slide in a <div> and give it a height, since slides have none of their own.
prevArrow and nextArrow take an element that has to spread the onClick and className it receives. The default arrows are named “Previous slide” and “Next slide”. A custom one needs its own aria-label.
customPaging takes the index and returns one dot. Use it for a better label or an aria-current.
appendDots takes the dots and returns their wrapper, a <ul> by default. Use it to put a pause button or a counter in the same row.

Events

beforeChange(current, next) fires as a move starts.
afterChange(current) fires when it lands. Use it for analytics, a synced thumbnail row or a live region.
onSwipe(direction) reports a swipe, and onEdge(direction) a swipe past the end of a carousel that does not loop.
None of them makes it controlled. There is no value. initialSlide sets where it starts, and goTo on the ref moves it.