使用Swiper开发中遇到的问题

swiper使用过程中不断踩坑，有时一个很小的问题，如果用自己的方法实现的话会花很长时间，但其实swiper的api文档里一般都会有，所以得多研究研究它的api文档，网上查一下别人使用过程中遇到的类似问题，就可以大大缩短开发时间。特此记录一下开发中遇到的问题

一、：移动端的效果要求有以下几点：1.上方是轮播页和对应的分页器，下方需要给它们相对应的选择按钮  2.用户可点击选择按钮，上方将显示对应的内容块  3.用户可滑动上方的内容，下面的选择按钮相对应改变

问题1和3都比较容易解决，用swiper很容易实现，问题3需要用到swiper的回调函数或者自己都行，回调函数快一点，代码如下：

但是问题2因为对API文档不熟悉就遇到点麻烦了，首先考虑的也是用它的回调函数来点击按钮控制上面的相应的轮播，然后自己写了个方法，发现它的轮播是通过控制位置的改变，这时又要计算其每一块相对应的位置，这就很麻烦了，于是又回去找swiper的api，由于不熟悉的原因，很费力的才找到一个方法，发现非常简单就可以解决了，就一句：

mySwiper.slideTo(index, speed, runCallbacks)

Swiper切换到指定slide。

index:必选，num，指定将要切换到的slide的索引。

speed:可选，num(单位ms)，切换速度

runCallbacks:可选，boolean，设置为false时不会触发onSlideChange回调函数。

二、：一个页面里同时需要两个不同的轮播效果，看到这个首先又去查了apI，找到了命名空间里的wrapperClass和slideClass，觉得可以开始做

做出来的效果发现它们根本就做不了两个不用的轮播效果，想到可能是最外层.swiper-container的问题，于是又改了最外层的类名成my-container，原本效果应该只是在swiper-container这个容器里轮播的，如：

改了最外层类名成my-container后，效果就完全变了，会变成整个屏幕都可以滚动

百思不得其解，网上也找了，没发现什么问题，API文档里也没看到这个问题，经过多次的试验后，发现要改它的类，给同一个页面不同的轮播效果其实是可以的，但你要保留swiper自带的类名swiper-container就可以了

也可以给id来控制改变不同的效果，最主要的是保留swiper-container这个类名，同样的发现命名空间里的wrapperClass和slideClass的类名好像也是要保留的才没问题的，官方的Api文档里没有提到要保留，这个问题就都这里了

三：用到的一些属性：

1.freeMode

默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。

2.slidesPerView

设置slider容器能够同时显示的slides数量(carousel模式)。

可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。

loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。

3.loop

设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide并在合适的时候切换，让Swiper看起来是循环的。

loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。

4.observer

启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。

默认false，不开启，可以使用update()方法更新。

5.observeParents

将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。

6.centeredSlides

设定为true时，活动块会居中，而不是默认状态下的居左。

7.preventClicksPropagation

阻止click冒泡。拖动Swiper时阻止click事件。