移动端网页触摸内容滑动js插件Swiper的使用（项目总结）

首先这是一个不错的移动端网页触摸内容滑动js插件，以前的时候很少用到这样的插件，又丰富了知识，Swiper一个非常不错的插件

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="theme/css/images/home/banner2.jpg">
        </div>
        <div class="swiper-slide"><img src="theme/css/images/home/banner1.jpg">
        </div>
        <div class="swiper-slide"><img src="theme/css/images/home/banner.jpg"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

//banner
var mySwiper = new Swiper('.swiper-container', {
    loop: true,
    autoplay: 3000,
    pagination: '.swiper-pagination'
});

看 Swiper 的api文档很容易看懂的，关键还是靠平时的积累。

loop英文意思是环形的意思，如果设置为true的话，就是循环播放的意思。

autoplay英文意思是自动播放，也就是自动播放和自动滑动的间隔时间为3000微秒

pagination: '.swiper-pagination'

<div class="swiper-pagination"></div>

就是控制图片滑动下方的几个小点

var mySwiper = new Swiper('.swiper-container', {
    loop: true,
    autoplay: 3000,
    pagination: '.swiper-pagination'
});

其中有很多配置选项，可以根据 Swiper 的 api文档配合自己的需求进行添加。