swiper插件快速实现轮播图

swiper是一款轻量级的轮播图插件，不仅支持pc端更是为移动端而生，用它可以快速地做出一个轮播图，或者扩展使其做出复杂的轮播效果。使用swiper插件可以大大减少代码量，减轻工作压力。

基本用法

swiper使用需要两个文件，一个是swiper.css，里面规定了一些在这个滑动轮播插件中常用的样式，当然如果你愿意的话可以自己定义样式。另外一个是swiper.js这个是插件的主体部分。在页面中引入这两个文件之后首先要写基本的html结构
下面所有的使用方式基于swiper 4.x

 <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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>

类名为swiper-container 是滑动轮播插件的包裹器，类似于一个mask，一个窗口，swiper-wrapper是一个按照一定顺序排列的所有轮播图的集合，在默认情况下是左右排列，当鼠标或者触屏进行操作的时候，改变的是这个元素的位置，而达到轮播的效果。swiper-slide则是每个轮播图元素，在写好基本html结构之后，需要对这个轮播图进行初始化。

<script>
var swiper = new Swiper('.swiper-container');
</script>

大部分的轮播图都有分页，导航，可以让用户看到目前是在什么位置，并且让用户知道这是一个可以交互的部分，添加分页的方式也很简单，只需要在初始化的时候添加选项指定一下分页的元素就行,在swiper-container下面添加下一个与上一个按钮

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

在这里swiper-button-next和swiper-button-prev都是指定好的按钮，下一个按钮会垂直居中并且靠右边，上一个按钮会垂直居中靠右边，当然也能自己指定按钮。

var swiper = new Swiper('.swiper-container',{
navigation:{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});

添加分页的方式和导航按钮非常类似

 <div class="swiper-container">
<div class="swiper-wrapper">
...
</div>
<!-- 分页 -->
<div class="swiper-pagination"></div>
<!--导航按钮-->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

在初始化的时候加入分页元素

var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
navigation:{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});

自动循环在初始化的时候加入

var swiper = new Swiper('.swiper-container', {
//分页
pagination: {
el: '.swiper-pagination',
},
//导航按钮
navigation:{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//自动轮播
autoplay: {
delay: 2500,//时间 毫秒
disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true 
},
loop:true,//循环 最后面一个往后面滑动会滑到第一个
});