2016-03-31 14:17:09 +08:00
|
|
|
|
---
|
|
|
|
|
category: Components
|
2016-06-27 18:21:12 +08:00
|
|
|
|
type: Views
|
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
|
|
|
|
|
|
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
|
|
|
|------------------|----------------------------------------------|----------|---------------------------------|
|
|
|
|
|
| effect | 动画效果函数,可取 scrollx, fade | String | scrollx |
|
|
|
|
|
| dots | 是否显示面板指示点 | Boolean | true |
|
|
|
|
|
| vertical | 垂直显示 | Boolean | false |
|
|
|
|
|
| autoplay | 是否自动切换 | Boolean | false |
|
|
|
|
|
| easing | 动画效果 | String | linear |
|
2015-11-05 18:29:30 +08:00
|
|
|
|
| beforeChange | 切换面板的回调 | function(from, to) | 无
|
|
|
|
|
| afterChange | 切换面板的回调 | function(current) | 无
|
|
|
|
|
|
|
|
|
|
更多参数可参考:https://github.com/akiran/react-slick
|
2015-08-03 14:52:26 +08:00
|
|
|
|
|
|
|
|
|
<style>
|
2015-08-03 17:45:58 +08:00
|
|
|
|
.ant-carousel .slick-slide {
|
2015-08-03 14:52:26 +08:00
|
|
|
|
text-align: center;
|
|
|
|
|
height: 100px;
|
|
|
|
|
line-height: 100px;
|
|
|
|
|
background: #71B5DE;
|
|
|
|
|
color: #fff;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
#components-carousel-demo-vertical .ant-carousel {
|
|
|
|
|
margin-right: 35px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|