# Carousel 走马灯
旋转木马，一组轮播的区域。

## 何时使用
- 当有一组平级的内容。
- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
- 常用于一组图片或卡片轮播。

### 基本使用
适用广泛的基础用法

@[demo](./demo/basic.vue)


### 指示器
可以将指示器的显示位置设置在容器外部

@[demo](./demo/outside.vue)


### 切换箭头
可以设置切换箭头的显示时机

@[demo](./demo/arrow.vue)


### 卡片化
当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格

@[demo](./demo/card.vue)

### 动画
可以设置滚动动画。设置的值可以是 linear, ease-in, ease-in-out等， 还是自定义cubic-bezier函数

@[demo](./demo/animation.vue)


## Carousel Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------ | ------- | ------- | ------------------- | -------- |
| height | 走马灯的高度 | string  | - | - |
| initial-index | 初始状态激活的幻灯片的索引，从 0 开始 | number  | —	| 0 |
| trigger | 指示器的触发方式 | string | click／hover | hover |
| autoplay | 是否自动播放 | boolean | true/false | true |
| loop-play | 是否无限循环 | boolean | true/false | true |
| interval | 自动切换的时间间隔，单位为毫秒 | number  | - | 3000 |
| indicator | 是否显示指示器的位置 | boolean | true/false | true |
| indicator-position | 指示器的位置 | string | outside/none | — |
| arrow | 切换箭头的显示时机 | string | always/hover/never | hover |
| type | 走马灯的类型 | string | card/normal | normal |
| easing | 动画函数 | string | linear/ease-in/ease-in-out/cubicbezier函数等 | ease-in-out |
| easing-time | 动画执行时间(s) | number | - | .4 |
| adaptive-width | 自适应宽度 | boolean | true/false | false |

## Carousel Events

| 事件名称 | 说明 | 回调参数 |
| ------- | ---- | ----- |
| change | 幻灯片切换时触发 | 目前激活的幻灯片的索引，原幻灯片的索引 |


## Carousel Methods
| 方法名 | 说明 | 参数 |
| ---- | ---- | ----- |
| setCurrent | 手动切换幻灯片 | 需要切换的幻灯片的索引，从 0 开始 |
| prev | 切换至上一张幻灯片 | - |
| next | 切换至下一张幻灯片 | - |

### slots
| name | 说明 | slot-scope |
| --- | --- | --- |
| pagination | 自定义指示器 | - |