Carousel

A set of carousel areas.

When To Use

When there is a group of content on the same level.
When there is insufficient content space, it can be used to save space in the form of a revolving door.
Commonly used for a group of pictures/cards.

Examples

API

Common props ref：Common props

Property	Description	Type	Default	Version	Global Config
arrows	Whether to show switch arrows	boolean	false	5.17.0	×
autoplay	Whether to scroll automatically, you can specify `autoplay={{ dotDuration: true }}` to display the progress bar	boolean \| { dotDuration?: boolean }	false	dotDuration: 5.24.0	×
autoplaySpeed	Delay between each auto scroll (in milliseconds)	number	3000		×
adaptiveHeight	Adjust the slide's height automatically	boolean	false		×
dotPlacement	The position of the dots, which can be one of `top` `bottom` `start` `end`	string	`bottom`		×
~~dotPosition~~	The position of the dots, which can be one of `top` `bottom` `left` `right` `start` `end`, Please use `dotPlacement` instead	string	`bottom`		×
dots	Whether to show the dots at the bottom of the gallery, `object` for `dotsClass`	boolean \| { className?: string }	true		×
draggable	Enable scrollable via dragging on desktop	boolean	false		×
fade	Whether to use fade transition	boolean	false		×
infinite	Infinitely wrap around contents	boolean	true		×
speed	Animation speed in milliseconds	number	500		×
easing	Transition interpolation function name	string	`linear`		×
effect	Transition effect	`scrollx` \| `fade`	`scrollx`		×
afterChange	Callback function called after the current index changes	(current: number) => void	-		×
beforeChange	Callback function called before the current index changes	(current: number, next: number) => void	-		×
waitForAnimate	Whether to wait for the animation when switching	boolean	false		×

Find more APIs in react-slick documentation.

Methods

Name	Description
goTo(slideNumber, dontAnimate)	Go to slide index, if dontAnimate=true, it happens without animation
next()	Change current slide to next slide
prev()	Change current slide to previous slide

Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

Token	Type	Native description
`dotWidth`	`number \| string`	Width of indicator
`dotHeight`	`number \| string`	Height of indicator
`dotGap`	`number`	gap between indicator
`dotOffset`	`number`	dot offset to Carousel edge
`dotWidthActive`	`number`	See native declaration and inherited types
`dotActiveWidth`	`number \| string`	Width of active indicator
`arrowSize`	`number`	Size of arrows
`arrowOffset`	`number`	arrows offset to Carousel edge

Declaration source: vendor/components/carousel/style/index.ts

import type { CSSObject } from '@ant-design/cssinjs';

import { Keyframes, unit } from '@ant-design/cssinjs';

import { resetComponent } from '../../style';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks } from '../../theme/internal';

export interface ComponentToken {
  /**
   * @desc 指示点宽度
   * @descEN Width of indicator
   */
  dotWidth: number | string;
  /**
   * @desc 指示点高度
   * @descEN Height of indicator
   */
  dotHeight: number | string;
  /**
   * @desc 指示点之间的间距
   * @descEN gap between indicator
   */
  dotGap: number;
  /**
   * @desc 指示点距离边缘的距离
   * @descEN dot offset to Carousel edge
   */
  dotOffset: number;
  /** @deprecated Use `dotActiveWidth` instead. */
  dotWidthActive: number;
  /**
   * @desc 激活态指示点宽度
   * @descEN Width of active indicator
   */
  dotActiveWidth: number | string;
  /**
   * @desc 切换箭头大小
   * @descEN Size of arrows
   */
  arrowSize: number;
  /**
   * @desc 切换箭头边距
   * @descEN arrows offset to Carousel edge
   */
  arrowOffset: number;
}

interface CarouselToken extends FullToken<'Carousel'> {}

FAQ

How to add custom arrows?

See #12479.

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Property	Description	Type	Default
style	The additional style	CSSProperties	-
className	The additional css class	string	-
rootClassName	ClassName on the root element	string	-
autoFocus	Auto focus when component mounted, only effective for focusable elements like forms, links, etc.	boolean	false

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

vendor/components/carousel/index.tsx
vendor/components/carousel/style/index.ts

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.