走马灯 Carousel - Ant Design

旋转木马，一组轮播的区域。

何时使用

当有一组平级的内容。
当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
常用于一组图片或卡片轮播。

代码演示

1

最简单的用法。

1

定时切换下一张。

TopBottomLeftRight

1

位置有 4 个方向。

1

切换效果为渐显。

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本
autoplay	是否自动切换	boolean	false
autoplaySpeed	自动切换的间隔（毫秒）	number	3000
dotPosition	面板指示点位置，可选 `top` `bottom` `left` `right`	string	`bottom`
dots	是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者	boolean \| { className?: string }	true
fade	使用渐变切换动效	boolean	false
infinite	是否无限循环切换（实现方式是复制两份 children 元素，如果子元素有副作用则可能会引发 bug）	boolean	true
speed	切换动效的时间（毫秒）	number	500
easing	动画效果	string	`linear`
effect	动画效果函数	`scrollx` \| fade	`scrollx`
afterChange	切换面板的回调	(current: number) => void	-
beforeChange	切换面板的回调	(current: number, next: number) => void	-
waitForAnimate	是否等待切换动画	boolean	false

方法

名称	描述
goTo(slideNumber, dontAnimate)	切换到指定面板, dontAnimate = true 时，不使用动画
next()	切换到下一面板
prev()	切换到上一面板

更多 API 可参考：https://react-slick.neostack.com/docs/api

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
dotActiveWidth	激活态指示点宽度	number	24
dotHeight	指示点高度	number	3
dotWidth	指示点宽度	number	16

全局 Token如何定制？

FAQ

如何自定义箭头？

可参考 #12479。