做移动端一定会遇到触摸滑动的需求，既需要实现左右的或者上下的自动滚动，又要实现手指滑动的功能。使用swiper 插件就可以完全的满足这个功能，swiper 是开源、免费、强大的触摸滑动插件，使用也很容易上手！
swiper 官方中文网 https://www.swiper.com.cn/
swiper api文档 https://www.swiper.com.cn/api/index.html
swiper 下载地址 https://www.swiper.com.cn/download/index.html
Swiper构造函数
new Swiper(swiperContainer, parameters)
构造函数有两个主要参数：
swiperContainer
Swiper容器的css选择器，HTMLElement or string，必选。例如“.swiper-container”。
一个页面中引用多个Swiper，可以给每个容器加上ID或Class区分，要保留默认的类名swiper-container
parameters
Swiper的个性化配置，object类型，可选，详细配置如下：
- initialSlide 设定初始化时slide的索引。
类型：number 默认：0 启用版本：4.0.0
设置这个参数，可以让第一个页面的显示不一定是索引为0 的。
- direction 滑动方向，可设置水平(horizontal)或垂直(vertical)。
类型：string 默认：horizontal
-
speed 切换速度
slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
类型：number 默认：300 启用版本：4.0.0
-
grabCursor 指针形状
设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
类型：boolean 默认：false
- parallax 设置为true开启视差效果。
效果可以应用于container或slide的子元素。当应用于container的子元素（常用于视差背景图），每次切换时视差效果仅有设定值的slide个数-1分之1
- autoHeight 自动高度
设置为true时，wrapper和container会随着当前slide的高度而发生变化。即高度随内容变化
- uniqueNavElements 独立分页元素
类型：boolean 默认：true
控制组件放在container外面的时候，需要用到。
- nested 用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。
类型：boolean 默认：false 启用版本：4.0.0
请将子swiper的nested设置为true。
由于需要在slideChangeEnd时判断作用块，因此快速滑动时这个选项无效。
- on 注册事件，Swiper4.0开始使用关键词this指代Swiper实例。
类型：object 启用版本：4.0.0
- init 初始化
类型：boolean 默认：true 启用版本：4.0.0
当你创建一个Swiper实例时是否立即初始化。如果禁止了(设为false)，可以稍后使用mySwiper.init()来初始化
- preloadImages 默认为true，Swiper会强制加载所有图片。
类型：boolean 默认：true 启用版本：4.0.0
-
centeredSlides 设定为true时，active slide会居中，而不是默认状态下的居左。
类型：boolean 默认：false 启用版本：4.0.0
- slidesPerView 设置slider容器能够同时显示的slides数量(carousel模式)。
类型：number or auto 默认：1 启用版本：4.0.0
- slidesPerGroup 在carousel mode下定义slides的数量多少为一组。
类型：number 默认：1 启用版本：4.0.0
- spaceBetween 在slide之间设置距离（单位px）。
类型：number 默认：0 启用版本：4.0.0
-
slidesPerColumn 多行布局里面每列的slide数量。
类型：number 默认：1 启用版本：4.0.0
- slidesPerColumnFill 多行布局中以什么形式填充
类型：string 默认：column 启用版本：4.0.0
可选值为column row
- freeMode free模式
类型：boolean 默认：false 启用版本：4.0.0
默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。
- loop loop模式
类型：boolean 默认：false 启用版本：4.0.0
设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。 loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。
- preventClicks
类型：boolean 默认：true 启用版本：4.0.0
当swiper在触摸时阻止默认事件（preventDefault），用于防止触摸时触发链接跳转。
-
noSwiping
类型：boolean 默认：true 启用版本：4.0.0
设为true时，可以在slide上（或其他元素）增加类名'swiper-no-swiping'，使该slide无法拖动（但是可以通过组件切换），希望文字被选中时可以考虑使用。
该类名可通过noSwipingClass修改。
- noSwipingSelector 设置不可触摸滑动的元素，例如input
类型：string
- allowSlidePrev 设为false可禁止向左或上滑动。
类型：boolean 默认：true 启用版本：4.0.0
- observer 监视器
类型：boolean 默认：false 启用版本：4.0.0
启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
默认false，不开启，可以使用update()方法更新。
- wrapperClass 设置wrapper的css类名。
类型：string 默认：swiper-wrapper 启用版本：4.0.0
-
slideClass 设置slide的类名。
类型：string 默认：swiper-slide 启用版本：4.0.0
- init 回调函数，初始化后执行。
启用版本：4.0.0
-
autoplay 回调函数，在slide自动切换开始时执行。
类型：function 启用版本：4.0.0
-
mySwiper.realIndex 返回当前活动块(激活块)的索引。在loop模式下不会将复制的块的数量计算在内
启用版本：4.0.0
-
mySwiper.allowTouchMove 设置/查看是否禁止触摸滑动。
启用版本：4.0.0
-
mySwiper.slideNext() 滑动到下一个滑块。
启用版本：4.0.0
-
mySwiper.slidePrev() 滑动到前一个滑块。
启用版本：4.0.0
-
mySwiper.slideTo() Swiper切换到指定slide。
启用版本：4.0.0
Swiper构造函数
1.autoplay 设置为true启动自动切换，并使用默认的切换设置。
类型：object/boolean 启用版本：4.0.0
delay 自动切换的时间间隔，单位ms
disableOnInteraction 用户操作swiper之后，是否禁止autoplay。默认为true
mySwiper.autoplay.start() 开始自动切换。一般用来做“Play”按钮。
mySwiper.autoplay.stop() 停止自动切换。一般用来制作“pause”按钮。
2.effect slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
类型：string 默认：slide 启用版本：4.0.0
3.pagination 分页器
类型：object 启用版本：4.0.0
el 分页器容器的css选择器或HTML标签
type 分页器样式类型，可选‘bullets’ 圆点（默认）‘fraction’ 分式 ‘progressbar’ 进度条‘custom’ 自定义
clickable 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
progressbarOpposite 使进度条分页器与Swiper的direction参数相反，也就是说水平方向切换的swiper显示的是垂直进度条而垂直方向切换的swiper显示水平进度条
renderBullet 渲染分页器小点。这个参数允许完全自定义分页器的指示点。接受指示点索引和指示点类名作为参数。
4.navigation 前进后退按钮
类型：object 启用版本：4.0.0
nextEl 前进按钮的css选择器或HTML元素。
prevEl 后退按钮的css选择器或HTML元素
hideOnClick 点击slide时显示/隐藏按钮。
以上并不是所有的配置参数与组件，仅仅选取了官网的部分。
这是一个小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
<style>
.swiper-container{
background-color: #31A3F5;
border:1px solid #31A3F5;
height: 30vh;
text-align: center;
width: 100vw;
color: white;
font-size: 50px;
}
.swiper-slide{
line-height: 30vh;
}
.swiper-button-prev{
color: white;
}
</style>
</head>
<body>
<!--swiperContainer : Swiper容器的css选择器，HTMLElement or string，必选。例如“.swiper-container”。-->
<!--parameters : Swiper的个性化配置，object类型，可选。-->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">页面1</div>
<div class="swiper-slide">页面2</div>
<div class="swiper-slide">页面3</div>
</div>
<!--分页器-->
<div class="swiper-pagination"></div>
<!--导航按钮-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
<script type="text/javascript">
// new Swiper(swiperContainer, parameters)用于初始化一个Swiper，返回初始化后的Swiper实例
var mySwiper = new Swiper('.swiper-container',{
// direction: 'vertical', //上下滑动
autoplay:{
// disableOnInteraction设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
disableOnInteraction:false,
},
// loop设置为true。会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
loop:true,
// 使用分页导航
pagination:{
el:'.swiper-pagination',
clickable :true,
},
// 导航按钮
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev',
},
});
</script>
</html>
运行之后的是
这个demo既可以实现自动播放，按钮左右导航，分页导航，还可以实现手指的左右滑动，滑动之后可以再自动播放。