swiper插件

作为一名前端，基本上每个项目都有要用到图片轮播，在这里给大家分享一下我常用的图片轮播插件swiper。

对于我来说，图片轮播用的最多的就是swiper（http://www.swiper.com.cn/） 插件，他能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。有一个需要注意的是使用swiper之前必须先引入swiper.min.js和swiper.min.css文件。

1.html结构

<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>

2.初始化swiper（最好是挨着</body>标签）

<script>

        var mySwiper = new Swiper ('.swiper-container', {

                direction: 'vertical',

 

// 循环播放

                loop: true,

 

// 如果需要分页器

                pagination: '.swiper-pagination',

 

                // 如果需要前进后退按钮

                nextButton: '.swiper-button-next',

                prevButton: '.swiper-button-prev',

 

                // 如果需要滚动条 

                scrollbar: '.swiper-scrollbar',

        })

</script>

3.常用配置

（1）自动播放,初始化swiper时加上下面这一段

autoplay: 5000,//自动滑动，用户操作后，不再生效

（2）滑动速度

speed：number,//number为设定的速度值，单位为ms

（3）当在tab选项卡里面时，只有第一个tab里面的swiper起效果了，而其它tab里面的swiper都不起作用了，这时，我们需要在初始化swiper时加上下面这一段

observer:true,//修改swiper自己或子元素时，自动初始化swiper  

observeParents:true,//修改swiper的父元素时，自动初始化swiper 

（4）有时我们需要一个slide容器里面显示多个slides，需要在初始化时加上下面这一段

slidesPerView : number,//number是你一个slide里面需要显示的slides的个数，这里可以是整数，也可以是小数

（5）slide之间添加间隙,初始化swiper时加上下面这一段

spaceBetween : number,//number是你一个slide之间的距离，单位为px

（6）分页器

paginationType : 'bullets',//默认圆点

paginationType : 'fraction', //分式

paginationType : 'progress',//进度条式

（7）自定义分页器，首先要先定义分页器类型为custom类型，然后再自定义分页器内容，

paginationType : 'custom',//自定义-分页器样式类型 

//设置自定义分页器的内容 

paginationCustomRender: function (swiper, current, total) { 

         var _html = '';

         for (var i = 1; i <= total; i++) {

             if (current == i) {

                 _html += '<li class="swiper-pagination-custom active">' + i + '</li>';

             }else{

                 _html += '<li class="swiper-pagination-custom">' + i + '</li>';

             }

         }

         return _html;//返回所有的页码html 

     }