Swiper 是纯 JS 打造的轮播图插件，相比于其他同类插件，Swiper 支持触摸滑动，这使得 Swiper 在移动端开发具有很大优势。
Swiper 官网：http://www.swiper.com.cn/
在具体的项目开发中，要在 html 文件的 <head> 标签内引用 Swiper 的 css 文件，如果项目较大，不建议在头部引入 Swiper 的 js 文件，因为加载 js 文件的同时页面不会加载其他内容，如果 js 文件较大，会影响用户体验。js 文件可以在 <body> 内引入，只要在该 Swiper 的 <script> 标签之前就可以。
官方文档对源码有很详细的介绍，在这里推荐使用 autoplay.html 这个模版，然后在第一时间在<script>标签里加上 loop: true,（不要忘记在前面加一个逗号），下面是我在实践中总结的一些经验：
1. 给 Swiper 加上编号
什么意思呢？就是通过 class 或者 id 将每个 Swiper 区分开，一个页面如果出现两个及以上的 Swiper ，如果没有区分，第二个 Swiper 的样式将会覆盖掉第一个的样式。我的做法就是在每一个默认 class 之后加一个私有 class ，如图所示。这样在写第二个 Swiper 的时候，以同样的规则命名为 “2” ，就会将每个 Swiper 区分开。
2. 换掉指示器小点的样式
Swiper 默认的指示器是蓝色小圆点，这个默认效果可以通过 .swiper-pagination-bullet 和 .swiper-pagination-bullet-active 来改变，但是有时要改变它们的层级关系和透明度，层级关系用 z-index 来调，透明度用 opacity 来调，0 是全透明，1 是不透明，用 0-1 的小数来调整。
3. 指示器和切换按钮可以提出来
上面那个图片里可以看到， pagination1 next1 prev1 是包含在 container1 里面的，但有时指示器和按钮在轮播图外面，就可以将这三个元素提出来，和 container1 同级，这样就可以相对于外面的容器来进行定位，比较方便。
4. 待续…