swiper使用過程中不斷踩坑，有時(shí)一個(gè)很小的問題，如果用自己的方法實(shí)現(xiàn)的話會(huì)花很長(zhǎng)時(shí)間，但其實(shí)swiper的api文檔里一般都會(huì)有，所以得多研究研究它的api文檔，網(wǎng)上查一下別人使用過程中遇到的類似問題，就可以大大縮短開發(fā)時(shí)間。特此記錄一下開發(fā)中遇到的問題

一、：移動(dòng)端的效果要求有以下幾點(diǎn)：1.上方是輪播頁和對(duì)應(yīng)的分頁器，下方需要給它們相對(duì)應(yīng)的選擇按鈕? 2.用戶可點(diǎn)擊選擇按鈕，上方將顯示對(duì)應(yīng)的內(nèi)容塊 ?3.用戶可滑動(dòng)上方的內(nèi)容，下面的選擇按鈕相對(duì)應(yīng)改變

問題1和3都比較容易解決，用swiper很容易實(shí)現(xiàn)，問題3需要用到swiper的回調(diào)函數(shù)或者自己都行，回調(diào)函數(shù)快一點(diǎn)，代碼如下：

但是問題2因?yàn)閷?duì)API文檔不熟悉就遇到點(diǎn)麻煩了，首先考慮的也是用它的回調(diào)函數(shù)來點(diǎn)擊按鈕控制上面的相應(yīng)的輪播，然后自己寫了個(gè)方法，發(fā)現(xiàn)它的輪播是通過控制位置的改變，這時(shí)又要計(jì)算其每一塊相對(duì)應(yīng)的位置，這就很麻煩了，于是又回去找swiper的api，由于不熟悉的原因，很費(fèi)力的才找到一個(gè)方法，發(fā)現(xiàn)非常簡(jiǎn)單就可以解決了，就一句：

mySwiper.slideTo(index, speed, runCallbacks)

Swiper切換到指定slide。

index:必選，num，指定將要切換到的slide的索引。

speed:可選，num(單位ms)，切換速度

runCallbacks:可選，boolean，設(shè)置為false時(shí)不會(huì)觸發(fā)onSlideChange回調(diào)函數(shù)。

二、：一個(gè)頁面里同時(shí)需要兩個(gè)不同的輪播效果，看到這個(gè)首先又去查了apI，找到了命名空間里的wrapperClass和slideClass，覺得可以開始做

做出來的效果發(fā)現(xiàn)它們根本就做不了兩個(gè)不用的輪播效果，想到可能是最外層.swiper-container的問題，于是又改了最外層的類名成my-container，原本效果應(yīng)該只是在swiper-container這個(gè)容器里輪播的，如：

改了最外層類名成my-container后，效果就完全變了，會(huì)變成整個(gè)屏幕都可以滾動(dòng)

百思不得其解，網(wǎng)上也找了，沒發(fā)現(xiàn)什么問題，API文檔里也沒看到這個(gè)問題，經(jīng)過多次的試驗(yàn)后，發(fā)現(xiàn)要改它的類，給同一個(gè)頁面不同的輪播效果其實(shí)是可以的，但你要保留swiper自帶的類名swiper-container就可以了

也可以給id來控制改變不同的效果，最主要的是保留swiper-container這個(gè)類名，同樣的發(fā)現(xiàn)命名空間里的wrapperClass和slideClass的類名好像也是要保留的才沒問題的，官方的Api文檔里沒有提到要保留，這個(gè)問題就都這里了

三：用到的一些屬性：

1.freeMode

默認(rèn)為false，普通模式：slide滑動(dòng)時(shí)只滑動(dòng)一格，并自動(dòng)貼合wrapper，設(shè)置為true則變?yōu)閒ree模式，slide會(huì)根據(jù)慣性滑動(dòng)且不會(huì)貼合。

2.slidesPerView

設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量(carousel模式)。

可以設(shè)置為number或者 'auto'則自動(dòng)根據(jù)slides的寬度來設(shè)定數(shù)量。

loop模式下如果設(shè)置為'auto'還需要設(shè)置另外一個(gè)參數(shù)loopedSlides。

3.loop

設(shè)置為true 則開啟loop模式。loop模式：會(huì)在原本slide前后復(fù)制若干個(gè)slide并在合適的時(shí)候切換，讓Swiper看起來是循環(huán)的。

loop模式在與free模式同用時(shí)會(huì)產(chǎn)生抖動(dòng)，因?yàn)閒ree模式下沒有復(fù)制slide的時(shí)間點(diǎn)。

4.observer

啟動(dòng)動(dòng)態(tài)檢查器(OB/觀眾/觀看者)，當(dāng)改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時(shí)，自動(dòng)初始化swiper。

默認(rèn)false，不開啟，可以使用update()方法更新。

5.observeParents

將observe應(yīng)用于Swiper的父元素。當(dāng)Swiper的父元素變化時(shí)，例如window.resize，Swiper更新。

6.centeredSlides

設(shè)定為true時(shí)，活動(dòng)塊會(huì)居中，而不是默認(rèn)狀態(tài)下的居左。

7.preventClicksPropagation

阻止click冒泡。拖動(dòng)Swiper時(shí)阻止click事件。