## Swipe 轮播
### 基本用法
```html
number{{ i }}
```
```javascript
export default {
data() {
return {
index: 0,
item: 6,
};
},
}
```
这部分css是为了设置轮播图的宽高，不影响Swipe的工作，具体可以自已设置，下同！
```css
.slide{
text-align: center;
line-height: 200px;
font-size: 24px;
width: 100%;
height: 200px;
margin-bottom: 50px;
margin-top: 10px;
}
```
### 自动轮播
通过设置autoplayTime，让轮播图自动播放，autoplayTime单位为ms，自动切换卡片的时间间隔，值为 0 时不自动切换
```html
number{{ i }}
```
```javascript
export default {
data() {
return {
index: 0,
item: 6,
};
},
}
```
### 关闭Loop 模式
通过设置loop为true，让轮播图循环播放，注意：默认循环播放，当loop设为false时，可以取消循环播放
```html
number{{ i }}
```
```javascript
export default {
data() {
return {
index: 0,
item: 6,
};
},
}
```
### 不显示pagination
默认 pagination 开启, 关闭pagination，则不显示pagination
```html
number{{ i }}
```
```javascript
export default {
data() {
return {
indexNoPagination: 0,
item: 6,
};
},
}
```
### 过渡时长
speed, 单位ms, 切换卡片时的过渡效果的播放时长, 默认300ms
```html
number{{ i }}
```
```javascript
export default {
data() {
return {
indexSpeed: 0,
item: 6,
};
},
}
```
### 切换的滑动最小距离
成功触发切换卡片事件的最小滑动距离，可以传入百分比，如 '20%'，或者传入具体像素距离，如 '80px'。
```html
number{{ i }}
```
```javascript
export default {
data() {
return {
indexMinMoveDistance: 0,
item: 6,
};
},
}
```
### 属性
| 选项 | 类型 | 默认 | 描述 |
| ------ | ---- | -------- | ----------- |
| v-model| Number | 0 | 绑定了当前显示卡片的索引，该数据为双向绑定，可通过更改 v-model 的值直接更改当前显示卡片 |
| pagination | Boolean | true | 是否需要默认样式的导航器 |
| loop | Boolean | true | 循环切换 |
| autoplayTime | Number | 0 | 单位 ms，自动切换卡片的时间间隔，值为 0 时不自动切换 |
| speed | Number | 300 | 单位 ms, 切换卡片时的过渡效果的播放时长
| minMoveDistance | String | '20%' | 成功触发切换卡片事件的最小滑动距离，可以传入百分比，如 '20%'，或者传入具体像素距离，如 '80px'。
### 方法
- **swipe.reset()**
c-swipe 内部将重新计算 Swipe 的宽度，并根据新的宽度来计算滚屏的距离。这个可以解决容器重置大小后 c-swipe 滚屏距离不正确的问题。
例：
```jsx
item1
item2
item3
```