2018年3月12日。
作为一名前端，在做网页最常见的一定是做轮播图，而作为初级入门前端做轮播图时惯例会上网找一些轮播图案例修改到自己的网页中，而大神可能会自己写。而无论自己写还是上网找的案例都会有一个问题，内容复杂运用不方便。而且在现在多端兼容适配的时代，很多案例没有手机端滑动操作兼容，这十分违背开发者的需求。在我不懈努力下发现这个好用得要哭😭的轮播图插件（swiper)。我没有收到钱推广，我只是分享一下，把我认识的说出来，有不足请批评我。
好，如何使用这个插件呢？作为新手，当然是直接上官网找文档啦！官网地址：http://www.swiper.com.cn/
进入官网，看看它的示例，看看有没有满足自己要求的示例，然后下载官方swiper.js和swiper.css。我作为小白当然把完整的demo下载了，这样我可以直接复制我要的内容。
使用方法按官网的使用教程走就好，为了凑一下字数我就复制粘贴一下
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
</body>
</html>
2.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>
导航等组件可以放在container之外
3.你可能想要给Swiper定义一个大小，当然不要也行。
.swiper-container {
width: 600px;
height: 300px;
}
4.初始化Swiper：最好是挨着</body>标签
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>
如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
<script type="text/javascript">
window.onload = function() {
...
}
</script>
或者这样（Jquery和Zepto）
<script type="text/javascript">
$(document).ready(function () {
...
})
</script>
5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。
后面的<script></script>块我试着写到js文件中，发现运行不了，可能我漏掉了一些东西，你们也可以试一下。
而就是这点代码就做好了轮播图，当然一个轮播图如何能满足我的需求，给我来十个！！
多个swiper如何做呢？
<div class="fatherA">
<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>
</div>
<script>
var mySwiper = new Swiper ('.fatherA .swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>
正如上面的代码，只需加多一个父类元素就可以区分多个swiper，来一打都可以不影响。
关于这个插件的一个问题，如果你调用了swiper.min.css,就是官方的css,他们是用display:flex；的flex布局的，所有你代码又定义一个display:none；就会起冲突，导致样式错乱，不能滑动。
可能这文档写的太乱了，都不知道写的是什么，请见谅。