Carousel
走马灯

一组轮播的区域。
使用import{ Carousel }from"antd";

何时使用

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

代码演示

5.17.0

API

通用属性参考:通用属性

参数说明类型默认值版本
arrows是否显示箭头booleanfalse5.17.0
autoplay是否自动切换booleanfalse
autoplaySpeed自动切换的间隔(毫秒)number3000
adaptiveHeight高度自适应booleanfalse
dotPosition面板指示点位置,可选 top bottom left rightstringbottom
dots是否显示面板指示点,如果为 object 则可以指定 dotsClassboolean | { className?: string }true
draggable是否启用拖拽切换booleanfalse
fade使用渐变切换动效booleanfalse
infinite是否无限循环切换(实现方式是复制两份 children 元素,如果子元素有副作用则可能会引发 bug)booleantrue
speed切换动效的时间(毫秒)number500
easing动画效果stringlinear
effect动画效果函数scrollx | fadescrollx
afterChange切换面板的回调(current: number) => void-
beforeChange切换面板的回调(current: number, next: number) => void-
waitForAnimate是否等待切换动画booleanfalse

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

方法

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

主题变量(Design Token)

组件 Token如何定制?

Token 名称描述类型默认值
arrowOffset切换箭头边距number8
arrowSize切换箭头大小number16
dotActiveWidth激活态指示点宽度string | number24
dotGap指示点之间的间距number4
dotHeight指示点高度string | number3
dotOffset指示点距离边缘的距离number12
dotWidth指示点宽度string | number16

全局 Token如何定制?

FAQ

如何自定义箭头?

可参考 #12479