Carousel走马灯
Carousel
走马灯
一组轮播的区域。
使用import{ Carousel }from"antd"; |
何时使用
- 当有一组平级的内容。
- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
- 常用于一组图片或卡片轮播。
代码演示
API
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| arrows | 是否显示箭头 | boolean | false | 5.17.0 |
| autoplay | 是否自动切换 | boolean | false | |
| 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 |