何时使用

代码演示

基本

位置

自动切换

Carousel
走马灯

一组轮播的区域。

使用import { Carousel } from "antd";

源码components/carousel

文档

编辑此页更新日志

文档贡献者

Card卡片 Collapse折叠面板

Carousel
走马灯

一组轮播的区域。

使用import { Carousel } from "antd";

源码components/carousel

文档

编辑此页更新日志

何时使用

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

代码演示

1

基本

最简单的用法。

1

自动切换

定时切换下一张。

1

切换箭头

显示切换箭头。

5.17.0

TopBottomLeftRight

1

位置

位置有 4 个方向。

1

渐显

切换效果为渐显。

1

进度条

展示指示点的进度。

5.24.0

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本
arrows	是否显示箭头	boolean	false	5.17.0
autoplay	是否自动切换，如果为 object 可以指定 `dotDuration` 来展示指示点进度条	boolean \| { dotDuration?: boolean }	false	dotDuration: 5.24.0
autoplaySpeed	自动切换的间隔（毫秒）	number	3000
adaptiveHeight	高度自适应	boolean	false
dotPosition	面板指示点位置，可选 `top` `bottom` `left` `right`	string	`bottom`
dots	是否显示面板指示点，如果为 `object` 则可以指定 `dotsClass`	boolean \| { className?: string }	true
draggable	是否启用拖拽切换	boolean	false
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

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

方法

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

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
arrowOffset	切换箭头边距	number	8
arrowSize	切换箭头大小	number	16
dotActiveWidth	激活态指示点宽度	string \| number	24
dotGap	指示点之间的间距	number	4
dotHeight	指示点高度	string \| number	3
dotOffset	指示点距离边缘的距离	number	12
dotWidth	指示点宽度	string \| number	16

全局 Token如何定制？

FAQ

如何自定义箭头？

可参考 #12479。

文档贡献者

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本
arrows	是否显示箭头	boolean	false	5.17.0
autoplay	是否自动切换，如果为 object 可以指定 `dotDuration` 来展示指示点进度条	boolean \| { dotDuration?: boolean }	false	dotDuration: 5.24.0
autoplaySpeed	自动切换的间隔（毫秒）	number	3000
adaptiveHeight	高度自适应	boolean	false
dotPosition	面板指示点位置，可选 `top` `bottom` `left` `right`	string	`bottom`
dots	是否显示面板指示点，如果为 `object` 则可以指定 `dotsClass`	boolean \| { className?: string }	true
draggable	是否启用拖拽切换	boolean	false
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()

切换到上一面板

Token 名称

描述

类型

默认值

arrowOffset

切换箭头边距

number

arrowSize

切换箭头大小

number

dotActiveWidth

激活态指示点宽度

string | number

dotGap

指示点之间的间距

number

dotHeight

指示点高度

string | number

dotOffset

指示点距离边缘的距离

number

dotWidth

指示点宽度

string | number

Carousel走马灯

Carousel走马灯

何时使用

代码演示

1

1

1

1

1

1

1

API

方法

主题变量（Design Token）

FAQ

如何自定义箭头？

何时使用

代码演示

1

1

1

1

1

1

1

API

方法

主题变量（Design Token）

FAQ

如何自定义箭头？

Carousel
走马灯

Carousel
走马灯