ant-design/components/carousel/index.zh-CN.md

40 lines
1.2 KiB
Markdown
Raw Normal View History

2016-03-31 14:17:09 +08:00
---
category: Components
type: Data Display
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 |
| 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;
2016-11-09 16:56:49 +08:00
height: 160px;
line-height: 130px;
background: #506b9e;
2015-08-03 14:52:26 +08:00
color: #fff;
overflow: hidden;
}
</style>