ant-design/components/carousel/index.md

44 lines
1.3 KiB
Markdown
Raw Normal View History

2015-08-01 14:08:04 +08:00
# Carousel
- category: Components
- chinese: 走马灯
2015-08-22 20:16:24 +08:00
- type: 展示
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 |
| beforeChange | 切换面板的回调 | function(from, to) | 无
| afterChange | 切换面板的回调 | function(current) | 无
更多参数可参考https://github.com/akiran/react-slick
2015-08-03 14:52:26 +08:00
<style>
.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>