Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。使用的次数越多，遇到的问题就会越多，有的时候需求也会发生变化。
到目前止我遇到两种情况：
第一种是：要求swiper-pagination（分页器）的长度按百分比划分，而不是我们平常使用的圆点或小方块，每一页（swiper-slide）分页器宽度占总长度的N分之一。
第二种是：在部分安卓手机上不能滑屏或者出现卡顿。
针对这两种情况，下面我会列出三组代码，从最基本的例子开始，了解最简单的情况下我们如何写，遇到第一种情况下如何改，遇到第二种情况下需要做哪些修改，下面开始分解。
先看最简单的例子：
这里我们来看看上面这些配制选项分别代表什么意思，以及他们有什么用：
pagination: '.swiper-pagination', // 分页器容器的css选择器或HTML标签。
loop: true, // 设置为true 则开启loop模式。让Swiper看起来是循环的。
paginationClickable: true, // 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
nextButton: '.swiper-button-next', // 前进按钮的css选择器或HTML元素。
prevButton: '.swiper-button-prev', // 后退按钮的css选择器或HTML元素。
spaceBetween: 30, // slide之间的距离（单位px）。
autoplay: 3000, // 自动切换的时间间隔
/*
或者可以像下面这样写。
autoplay: ture, //设置为true启动自动切换，并使用默认的切换设置。
//等同于以下设置
autoplay: {
delay: 3000, // 自动切换的时间间隔，单位ms
stopOnLastSlide: false, // 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
disableOnInteraction: true, //用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。操作包括触碰，拖动，点击pagination等。
},
*/
effect: 'fade' // slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
下面我们来看看其余的常用配制选项有哪些：
direction：'vertical, // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
delay: 3000, // 自动切换的时间间隔，单位ms,滑动速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
grabCursor : true, // 设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。
autoHeight: true, // 高度随内容变化
preventClicks : false, //默认true 当swiper在触摸时阻止默认事件（preventDefault），用于防止触摸时触发链接跳转
preventLinksPropagation : false, //默认true，阻止click冒泡。拖动Swiper时阻止click事件。
官网上这个地址 配置选项 列出了所有，我这里只是把这个页面中用到的以及比较常用的说明了一下。
注：刚刚把官网上列出来的配置选项一一对了一下，不知道是不是引用的版本不同还是别的什么原因，有些官网的配制选项的写法不一样，测试后还会出问题，反而是自己上面写的demo没有问题。后面慢慢补充原因吧。
下面是样式代码：
/* ==============
头部banner图
============== */
.swiper-container {
width: 100%;
height: 3.32rem;
border-bottom: 1px solid #d3d3d3;
}
.swiper-slide {
background-position: center;
background-size: cover;
}
.swiper-slide a {
display: block;
width: 100%;
height: 3.30667rem;
}
我这里也帖出官网的使用方法：Swiper使用方法 ，实际使用过程中遇到了问题也可以直接去官网查看。
平常工作中可能直接像上面这样写也能满足要求。但如果你也在工作中遇到了上面我提两种问题，可以来看看下面的代码。
下面，我们来看第一个情况：
这个例子我用的是swiper-3.4.2的版本，引用的代码大家可以从官网上直接下载到。
相信看过官方文档的人都知道，swiper中有pagination参数——分页导航，其中有分页器样式类型——type，它有四个参数，分别为‘bullets’ 圆点（默认），‘fraction’ 分式 ，‘progressbar’ 进度条，‘custom’ 自定义。刚刚也测试了一下这个配制，发现并不是我想要的效果，我想要的效果如下图：
研究了一阵子之后，还是想通过自己的方式去解决，所以就有了下面的代码：
先给大家看一下我的html代码，为方便查看，删掉了大部分无用的代码。
先说明一下，这个页面上swiper-slide的个数是不限定的，根据获取到的数据进行循环，所以下面的js代码是先获取swiper-slide的个数，然后整个.swiper-wrapper宽度是100%，用100%除以个数就是每个swiper-slide的分页器所占的宽度。
下面是js代码：
当然，css代码也是要做一些修改的：
.wrap .swiper-container {
overflow: visible;
}
.wrap .swiper-pagination {
position: absolute;
left: 0 ;
bottom: -1rem !important;
width: 100%;
}
.wrap .swiper-pagination-white .swiper-pagination-bullet {
display: inline-block;
height: 1px;
background: #E6E6E6;
opacity: 1;
}
.wrap .swiper-pagination-white .swiper-pagination-bullet-active {
display: inline-block;
height: 1px;
opacity: 1;
background: #F73B42;
}
有了上面这些代码以后，这个功能就实现了，实测有效。
最后，我们来看第二种情况
一开始遇到这个问题，有点蒙，还以为是很难解决的问题，好在经过简单的搜索就找到了解决办法，移动端swiper.js中的坑------你怎能错过！！！！。
简而言之就是我们上面的代码只引用了swiper.js，而没有引入swiper.css和swiper.animate.js；重新引入后，问题就解决了；
根据这位作者给出的解决办法，我进行了简单的修改，同时，对所有的配制选项又做了一番了解，最终明白他这样写的原因了，废话不多说，直接看代码：
html中需要引入以下这些文件：
其他html的结构还是上面的。下面是配制选项的写法：
下面，一一来看这些配制选项的作用：
pagination: '.swiper-pagination',
loop: false,
mode: 'horizontal', // 横向滑屏
freeMode:false, // 默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
touchRatio:0.5, // 触摸距离与slide滑动距离的比率。
longSwipesRatio:0.1, // Swiper 中到上/下滑块的触发率,进行longSwipes时触发swiper所需要的最小拖动距离比例，即定义longSwipes距离比例。值越大触发Swiper所需距离越大。最大值0.5。
threshold:50, //滑动的临界值，临界值单位为px，如果触屏距离小于该值滑块不会运动。
followFinger:false, // 值为false时，仅当你释放slide时才会滑动，当你用手指按住滑块它不会动。
observer: true, //修改swiper自己或子元素时，自动初始化swiper,启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。默认false，不开启，可以使用update()方法更新。
observeParents: true //将observe应用于Swiper的父元素，修改swiper的父元素时，自动初始化swiper
加上这些配制，就解决了我的问题。以上，就是我目前遇到的情况了。如果您有更好的解决办法，还望多多指教，谢谢了。