mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
ffedddb211
* feat: rename Carousel token * docs: add component-token demo * fix: use dotActiveWidth instead of dotWidthActive * fix: use deprecatedTokens option
2.3 KiB
2.3 KiB
category | group | title | subtitle | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|---|
Components | 数据展示 | Carousel | 走马灯 | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*bPMSSqbaTMkAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-58QpYnqOsAAAAAAAAAAAAADrJ8AQ/original |
|
旋转木马,一组轮播的区域。
何时使用
- 当有一组平级的内容。
- 当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。
- 常用于一组图片或卡片轮播。
代码演示
基本
位置
自动切换
渐显
组件 Token
API
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
autoplay | 是否自动切换 | boolean | false | |
dotPosition | 面板指示点位置,可选 top bottom left right |
string | bottom |
|
dots | 是否显示面板指示点,如果为 object 则同时可以指定 dotsClass 或者 |
boolean | { className?: string } | true | |
waitForAnimate | 是否等待切换动画 | boolean | false | |
easing | 动画效果 | string | linear |
|
effect | 动画效果函数 | scrollx | fade |
scrollx |
|
afterChange | 切换面板的回调 | (current: number) => void | - | |
beforeChange | 切换面板的回调 | (current: number, next: number) => void | - |
方法
名称 | 描述 |
---|---|
goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时,不使用动画 |
next() | 切换到下一面板 |
prev() | 切换到上一面板 |
更多 API 可参考:https://react-slick.neostack.com/docs/api
Design Token
FAQ
如何自定义箭头?
可参考 #12479。