2016-03-31 14:17:09 +08:00
|
|
|
---
|
|
|
|
|
category: Components
|
2018-11-04 16:20:35 +08:00
|
|
|
type: 数据展示
|
2016-06-19 11:19:36 +08:00
|
|
|
title: Carousel
|
|
|
|
|
subtitle: 走马灯
|
2016-03-31 14:17:09 +08:00
|
|
|
---
|
2015-08-01 14:08:04 +08:00
|
|
|
|
2015-08-05 21:18:34 +08:00
|
|
|
旋转木马，一组轮播的区域。
|
2015-08-03 14:52:26 +08:00
|
|
|
|
|
|
|
|
## 何时使用
|
|
|
|
|
|
2015-08-05 21:18:34 +08:00
|
|
|
- 当有一组平级的内容。
|
|
|
|
|
- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
|
|
|
|
- 常用于一组图片或卡片轮播。
|
2015-08-03 14:52:26 +08:00
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
2019-05-06 12:04:39 +08:00
|
|
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
2019-07-11 14:14:33 +08:00
|
|
|
| afterChange | 切换面板的回调 | function(current) | 无 | | |
|
|
|
|
|
| autoplay | 是否自动切换 | boolean | false | | |
|
|
|
|
|
| beforeChange | 切换面板的回调 | function(from, to) | 无 | | |
|
2019-11-20 20:31:43 +08:00
|
|
|
| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom | |
|
2020-03-03 11:12:25 +08:00
|
|
|
| dots | 是否显示面板指示点，如果为 `string` 则指定为 `dotsClass` | boolean \| { dotsClass?:string } | true | | |
|
2019-07-11 14:14:33 +08:00
|
|
|
| easing | 动画效果 | string | linear | | |
|
|
|
|
|
| effect | 动画效果函数，可取 scrollx, fade | string | scrollx | | |
|
2015-11-05 18:29:30 +08:00
|
|
|
|
2017-10-10 13:41:04 +08:00
|
|
|
## 方法
|
|
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
| 名称 | 描述 |
|
|
|
|
|
| ------------------------------ | ------------------------------------------------- |
|
2019-11-20 20:31:43 +08:00
|
|
|
| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 |
|
|
|
|
|
| next() | 切换到下一面板 |
|
|
|
|
|
| prev() | 切换到上一面板 |
|
2017-10-10 13:41:04 +08:00
|
|
|
|
2017-10-25 10:25:44 +08:00
|
|
|
更多参数可参考：<https://github.com/akiran/react-slick>
|
