轮播图插件swiper 的使用

引入文件(注：目前版本号为Swiper3.x)

<link rel="stylesheet" type="text/css" href="//static.chimeroi.com/lib/slide/swiper.css">
<script src="//static.chimeroi.com/lib/slide/swiper.min.js"></script>

结构

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
<!-- 导航等组件可以放在container之外 -->

基本js配置

// selector 支持jquery的选择器
var mySwiper = new Swiper (‘.// swiper-container‘, {
    direction: ‘vertical‘,
    loop: true,
    
    // 如果需要分页器
    pagination: ‘.swiper-pagination‘,
    
    // 如果需要前进后退按钮
    nextButton: ‘.swiper-button-next‘,
    prevButton: ‘.swiper-button-prev‘,
    
    // 如果需要滚动条
    scrollbar: ‘.swiper-scrollbar‘,
  })        

项目中使用的坑

图片过大，需要使用类似全局函数resizeImg来控制图片显示时，开启了循环loop

此处需要可能有两个坑
1.图片重新设置宽高之后，宽度过大，会导致swiper-slide滑动时，图片未被截断。
方案：需要设置swiper-slide overflow:hidden;
2.图片load事件的监听
开启loop之后，swiper会深层拷贝swiper-slider内容的元素，默认会拷贝第一个和最后一个，通过视觉差，达到循环效果，直接在元素之上通过行内方法绑定的事件函数，不会直接，也就是不会执行onload 事件。动态追加的元素，可通过父元素的事件委托，但div不可委托图片的load事件。可以直接利用swiper插件提供的onInit 初始化回调函数，循环遍历包括深层拷贝的图片，然后resize。
例如：

 ```js
 var mySwiper = new Swiper(‘#swiper‘, {
            loop: headBannerLength>1,
            autoplay:5000,
            onInit: function(){
                $(‘#swiper img‘).each(function(){
                    resizeImg(this, width, height);
                })
            }
        });
 ```

开启了loop与react 配合使用的bug

react dom 渲染 时机与 swiper 深层dom拷贝相冲突，导致设置了loop循环时，会拷贝的react 渲染出来的svg 不完全，导致显示bug。
解决方案：在swiper 初始化后回掉react 渲染函数，并且将id挂载点改为class。
部分代码：
```js
// 循环
function initHousingMarket (){
    Array.prototype.forEach.call(document.getElementsByClassName(‘ct-housing-pie‘),function(e,i){
        initChart(e, dataHousingMarket, COLOR_PIE, ‘Number of Various<br>Properties‘, undefined, undefined, true);
    });
}

function initChart(elem, datas, colors, title, valueKey, titleSize, padding) {
    if (!elem) return;
    valueKey = valueKey || "y"
    removeZeroData(datas);
    // 挂载前清空，然后再渲染。不直接全部回调的原因是，加载速度原因
    elem.innerHTML = ‘‘;
    if (!datas.length) {
        elem = elem.parentNode;
        elem.parentNode.removeChild(elem);
        return;
    }
}
```

前进后退按钮再swiper 之外的时候

只需要改变，结构与样式。配置不变。

<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>