# Swiper 滑动视图容器

## 介绍

滑块视图容器，常用于广告位、商品轮播图

## 代码演示

### 引入组件

```json
{
  "usingComponents": {
    "free-swiper": "/components/swiper/index"
  }
}
```

### 基础用法

```js
data: {
  imgUrls: [
    'https://films-10014007.cos.ap-shanghai.myqcloud.com/mp-ip-commercialize/swiper-exp.png',
    'https://films-10014007.cos.ap-shanghai.myqcloud.com/mp-ip-commercialize/swiper-exp.png',
  ];
}
```

```html
<!-- 数字指示点风格 -->
<free-swiper data="{{ imgUrls }}" indicatorMode="number" />
<!-- 椭圆指示点风格 -->
<free-swiper data="{{ imgUrls }}" indicatorMode="oval" />
<!-- 实心指示点风格 -->
<free-swiper data="{{ imgUrls }}" indicatorMode="solid" />
```

<img width="320" src="https://films.qq.com/mp-ip-commercialize/swiper-exp.png">

**设置轮播属性**

```html
<free-swiper
  data="{{ imgUrls }}"
  autoplay="true"
  interval="3000"
  circular="true"
  current="0"
  indicatorMode="number"
/>
```

## API

### Props

| 参数                 | 说明                                               | 类型      | 默认值              |
| -------------------- | -------------------------------------------------- | --------- | ------------------- |
| data                 | 滑动视图数据                                       | _arrary_  | -                   |
| indicatorMode        | 指示点风格, 实心`dot`、椭圆 `oval`、 数字`number ` | _string_  | `oval`              |
| indicatorDots        | 是否显示面板指示点                                 | _boolean_ | `true`              |
| indicatorColor       | 指示点颜色                                         | _string_  | `rgba(0, 0, 0, .3)` |
| indicatorActiveColor | 当前选中的指示点颜色                               | _string_  | `000`               |
| autoplay             | 是否自动切换                                       | _boolean_ | `true`              |
| interval             | 自动切换时间间隔                                   | _number_  | `5000`              |
| duration             | 滑动动画时长                                       | _number_  | `500`               |
| circular             | 是否采用衔接滑动                                   | _boolean_ | `true`              |
| current              | 当前所在滑块的 index                               | _number_  | `0`                 |
| imageMode            | 图片填充模式，参考原生 image 的 mode 属性          | _string_  | `aspectFill`        |
| imageWidth           | 滑动图片视图宽度                                   | _string_  | `100%`              |
| imageHeight          | 滑动图片视图高度                                   | _string_  | `580rpx`            |

### Events

| 事件名      | 说明           | 回调参数                    |
| ----------- | -------------- | --------------------------- |
| bind:change | 图片切换时触发 | index，切换后显示的图片索引 |
| bind:click  | 点击图片时触发 | index，被点击的图片索引     |

### 外部样式类

| 类名              | 说明                   |
| ----------------- | ---------------------- |
| custom-class      | 根节点样式类           |
| swiper-class      | 滑动视图父容器样式类   |
| swiper-item-class | 滑动视图字体容器样式类 |
| dots-number-class | 数字类型指示点样式类   |

### CSS Var

可以通过设置 `css var`变量修改 Swiper 滑动视图容器`UI`

| 变量名                          | 属性          | 说明                     | 默认值                     |
| ------------------------------- | ------------- | ------------------------ | -------------------------- |
| --swiper-image-width            | width         | 滑动图片视图宽度         | `100%`                     |
| --swiper-image-height           | height        | 滑动图片视图高度         | `580rpx`                   |
| --swiper-dot-width              | width         | 实心/椭圆-指示点默认尺寸 | `8rpx`                     |
| --swiper-dot-height             | height        | 实心/椭圆-指示点默认尺寸 | `8rpx`                     |
| --swiper-dot-bottom             | bottom        | 实心/椭圆-指示点底部距离 | `24rpx`                    |
| --swiper-dot-active-color       | color         | 实心-指示选中颜色        | `#ff7437`                  |
| --swiper-dot-number-right       | right         | 数字-指示点右侧距离      | `24rpx`                    |
| --swiper-dot-number-bottom      | bottom        | 数字-指示点底部距离      | `24rpx`                    |
| --swiper-dot-number-color       | color         | 数字-指示点文字颜色      | `rgba(255, 255, 255, 0.4)` |
| --swiper-dot-oval-active-width  | width         | 椭圆-指示点宽度          | `16rpx`                    |
| --swiper-dot-oval-active-height | height        | 椭圆-指示点高度          | `8rpx`                     |
| --swiper-dot-oval-border-radius | border-radius | 椭圆-指示点圆角          | `10rpx`                    |