swiper 官网
1 使用方法
引入js（可与jQuery.js同时使用）与css文件
<link rel="stylesheet" href="dist/css/swiper.min.css">
<script src="dist/js/swiper.min.js"></script>
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>
js控制属性（初始化）
在页面加载完成后使用
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',
},
});
2 基本常用属性
slidesPerView:每次显示n个slide
slidesPerGroup：每次切换n个slide
spaceBetween:slide之间的间距
width:宽度，height:高度
autoHeight:高度是否跟随外部container及wrapper变化，默认为false
speed:切换速度
autoPlay:是否自动切换，默认为false
delay:延迟时间（延迟（等待）n s后切换到下一个slide）
loop:是否循环，默认为false
direction:方向，默认为horizontal（横向），可选"vertical"竖向
3 常用功能及组件
pagination:分页器
种类：bullets（圆点，默认）fraction (分式 <eg:3/10>)、progressbar (进度条,默认在顶部)、custom （自定义）；
scrollbar：滚动条
<div class="swiper-scrollbar"></div>
scrollbar: { el: '.swiper-scrollbar', },
lazyLoading:图片懒加载 ，
图片增加class = "swiper-lazy",src改为data-src
lazy: {
loadPrevNext: true,
},
navigation:前进与后退按钮
<div class="swiper-button-prev"></div> <div class="swiper-button-next"></div>
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
noSwiping:禁止滑动
<div class="swiper-slide swiper-no-swiping">slider2</div>
var mySwiper = new Swiper('.swiper-container',{
noSwiping : true,
});
touchStartPreventDefault:阻止touchStart('mousedown')默认事件
touchMoveStopPropagation：阻止touchmove冒泡事件
2019.04.23更新
偶尔会遇到这样的问题，各swiper-slide边上会有一点缝隙，原因是swiper-container及swiper-wrapper的宽度略大于swiper-slide,这是由于swiper-slide的宽度一般会取整，而上面二者不会；
若是设定了slidesPerView值大于1 ，可添加属性roundLengths : false,这样宽度便不会取整；
有时候并未设置slidesPerView,还是会这样，此时需将swiper-container宽度略增加或减少一点即可（设置padding-right值，因为swiper-slide默认贴合swiper-wrapper左侧或直接设置宽度）
