## Swiper

### 组件内容
<p>通用轮播组件目前包含以下内容</p>
<p>配置数据：宽度、高度、轮播速度、动画速度、是否自动播放、是否循环滚动、指示器等</p>
<p>支持行为：手动滑动、自动播放、循环滑动、自动播发时手动滑动等</p>
<p>支持事件：滚动到上一帧/下一帧回调事件等</p>

### 如何使用
npm
```shell
## 未安装package
npm install hello-ui --save-dev
## 已安装package
npm update hello-ui --save-dev
```
html
```html
<div class="bx-swiper">
  <div class="bx-swiper-scroller">
    <a class="bx-swiper-slide">
      <img src="http://img.winbaoxian.com/learning/banner/2016/11/10/135336317.png@!banner" class="img-responsive">
    </a>
    <a class="bx-swiper-slide">
      <img src="http://img.winbaoxian.com/learning/banner/2017/02/28/214011694.png@!banner" class="img-responsive">
    </a>
    <a class="bx-swiper-slide">
      <img src="http://img.winbaoxian.com/learning/banner/2016/12/30/094713105.png@!banner" class="img-responsive">
    </a>
    <a class="bx-swiper-slide">
      <img src="http://img.winbaoxian.com/learning/banner/2016/03/16/145053945.jpeg@!banner" class="img-responsive">
    </a>
  </div>
</div>
```
import as module
```js
// 使用全部组件情况
import 'node_modules/hello-ui/dist/hello.css';
import hello from 'hello-ui';
hello.Swiper.create('.bx-swiper');
// 只使用Swiper组件情况
import 'node_modules/hello-ui/dist/components/Swiper/Swiper.css';
import {Swiper} from 'hello-ui';
Swiper.create('.bx-swiper');
```

### API
| 参数| 说明 | 类型 | 默认值 |
| --- | --- | --- |  --- |
| width | 可选,轮播宽度 | Number/String |  容器宽度, 320或80% |
| height | 可选,轮播高度 | Number/String |  容器高度, 160或50% |
| speed | 可选,自动轮播间隔事件,autoplay为true时生效 | Number |  5000 |
| transitionSpeed | 可选,轮播滚动动画时间 | Number |  300 |
| loop | 可选,是否循环滚动 | Boolean |  true |
| autoplay | 可选,是否自动轮播 | Boolean |  true |
| pagination | 可选,是否展示指示器/分页器 | Boolean |  true |
| paginationLimit | 可选,页数大于当前值时,才展示分页器 | Number |  1 |
| paginationClass | 可选,覆盖指示器/分页器样式 | String |  null |
| angle | 可选,滑动角度小于该值,才能正常滑动 | Number |  45 |
| duration | 可选,滑动结束后,时间小于{duration}毫秒并且距离大于{distance},即判定为滑动到上一个/下一个 | Number |  300 |
| distance | 可选,滑动结束后,时间小于{duration}毫秒并且距离大于{distance},即判定为滑动到上一个/下一个 | Number |  30 |
| bounce | 可选,是否开启回弹 | Boolean |  true |
| onInit | 可选,轮播初始化回调事件 | Function |  noop |
| onTouchStart | 可选,轮播touchStart回调事件 | Function |  noop |
| onTouchMove | 可选,轮播touchMove回调事件 | Function |  noop |
| onTouchEnd | 可选,轮播touchEnd回调事件 | Function |  noop |
| onSlide | 可选,轮播滑动回调事件 | Function |  noop |
| onSlidePrev | 可选,轮播右滑/上一个回调事件 | Function |  noop |
| onSlideNext | 可选,轮播左滑/下一个回调事件 | Function |  noop |
| onTransitionEnd | 可选,轮播动画结束回调事件 | Function |  noop |

### Example
[功能预览](https://qiuguorong.github.io/hello-ui/dist/#/swiper)
<p></p>
简单功能, 都使用默认值
```js
Swiper.create('.bx-swiper');
```
定制功能, 可自选属性
```js
Swiper.create('.bx-swiper', {
  width: '80%',
  height: '50%', // 轮播组件容器宽度 * 50%
  speed: 5000,
  transitionSpeed: 300,
  loop: true,
  autoplay: true,
  pagination: true,
  paginationClass: 'ui-swiper-paginations',
  bounce: true,
  onInit: function() {},
  onTouchStart: function() {},
  onTouchMove: function() {},
  onTouchEnd: function() {},
  onSlide: function() {
    console.log(this.$parent.currentIndex);
  },
  onSlidePrev: function() {},
  onSlideNext: function() {},
  onTransitionEnd: function() {}
});
```

### 设备兼容
| 设备| 版本 | 手动 | 自动 | 备注
| --- | --- | --- |  --- |  --- |  --- |
| iPhone5C | 8.1.2 |  |  |   |
| iPhone5C | 10.3.1 |  |  |  |
| iPhone5S | 8.3 | √ | √ |  |
| iPhoneSE | 11.0.3 | √ | √ |  |
| iPhone6 | 10.1.1 | √ | √ |  |
| iPhone6S | 10.3.2 | √ | √ |  |
| iPhone7P | 10.3.2 | √ | √ |  |
| iPhoneX | 11 | √ | √ |  |
| iPad | 10.3.1 | √ | √ |  |
| 小米2S | 4.1.1 | √ | √ |  |
| 红米Note2 | 5.0.2 |  |  |  |
| 红米Note3 | 6.0.1 | √ | √ |  |
| 华为Mete8 | 7.0 | √ | √ |  |
| 华为TAG AL00 | 5.1 |  |  |  |
| Galaxy Note3 Lite 4G | 4.3 | √ | √ | bounce回弹滑动有点卡 |
| Vivo X5SL | 4.4.4 | √ | √ |  |
| MEIZU MX5 | 5.0.1 |  |  |  |
| OPPO R9TM | 5.1 |  |  |  |
| OPPO R7S | 4.4.4 | √ | √ |  |
| Nexus 6 | 7.0 | √ | √ |  |  |