swiper一款非常好用的輪播插件，支持移動端和PC端，用過很多次了，這次簡單的總結一下。方便以后查找使用，說明一下，下面的例子是基於swiper 4.0+版本的，如果你是其他的版本，請自行前往官網查看
至於為什么使用swiper，而不是自己手寫，請看下面官網的截圖：
開個玩笑，說白了，就是這個確實非常好用，而且很好上手，沒有什么難度。而且里面的API很友好，不像有的文檔，看起來很費勁，這個很清晰，好了，不說了，直接進入主題。
- 第一步肯定是引入他的css和js，它提供了cdn和下載引入兩種方式，由於我們現在的項目不是部署在國內，所以我就選擇了下載引入。
- 引入完成之后，就需要按照他的DOM結構引入里，這里，需要注意的是，他的DOM結構是能滑動的骨架，有的class名字可以更改，但是有的是不能更改的。所以還是建議大家，建議他的DOM結果引入。簡單的說，就是三層DIV
1 <div class="swiper-container">
2 <div class="swiper-wrapper">
3 <div class="swiper-slide">Slide 1</div>
4 <div class="swiper-slide">Slide 2</div>
5 <div class="swiper-slide">Slide 3</div>
6 </div>
7 <!-- 如果需要分頁器 -->
8 <div class="swiper-pagination"></div>
9
10 <!-- 如果需要導航按鈕 -->
11 <div class="swiper-button-prev"></div>
12 <div class="swiper-button-next"></div>
13
14 <!-- 如果需要滾動條 -->
15 <div class="swiper-scrollbar"></div>
16 </div>
17 導航等組件可以放在container之外
3.初始化Swiper 這里就是swiper的全部控制器了。這里也是3.0和4.0最大不同的地方。（2.0我還真的沒有用過）
1 var mySwiper = new Swiper ('.swiper-container', { 2 direction: 'vertical', // 垂直切換選項
3 loop: true, // 循環模式選項
4
5 // 如果需要分頁器
6 pagination: { 7 el: '.swiper-pagination', 8 }, 9
10 // 如果需要前進后退按鈕
11 navigation: { 12 nextEl: '.swiper-button-next', 13 prevEl: '.swiper-button-prev', 14 }, 15
16 // 如果需要滾動條
17 scrollbar: { 18 el: '.swiper-scrollbar', 19 }, 20 })
其實到這個時候，最簡單的一個swiper已經可以正常的運行了。但是這個畢竟是官網的例子，不是大家通用的， 所以在實際應用中，需要我們自己改造。
------------------------------------------------------------------------------華麗的分割線---------------------------------------------------------------------
下面介紹一下，我自己的是怎么應用的。請看下圖，就是簡單切換
本來是做的，點擊上面，切換兩個顯示，但是UI設計師要求，這個要像手機應用一樣滑動更換。所以這個時候就想到了swiper
首先應該是我的DOM文檔結構。請看下面的截圖，為什么是截圖，因為截圖的時候，我用編輯器把代碼折疊了，這樣能更好的看到swiper的DOM結構
大家可以看到，上面的那個ul里面，兩個選項是獨立的。而下面的就是swiper中的標准文檔結構，其中兩個dl是我的頁面內容。這個時候，來初始化這個swiper，請看下面的代碼
1 var mySwiper = new Swiper('.swiper-container', { 2 direction: 'horizontal', // 切換選項
3 loop: false, // 循環模式選項
4 on: { 5 slideChangeTransitionEnd: function () { 6 console.log(this.activeIndex); //切換結束時，告訴我現在是第幾個slide
7 var index = this.activeIndex; 8 $("#header li").removeClass("this_page").eq(index).addClass("this_page"); 9 }, 10 }, 11
12 })
這里比較不同的是，在第4行，加入了一個方法，請看官方的解釋：回調函數，swiper從一個slide過渡到另一個slide結束時執行。就是當我們滑動完成了，這里會得到一個現在顯示的是第幾張的一個索引值，通過this.activeIndex來獲得，這個時候，我獲取到這個值以后，就可控制上面的li元素，添加自定義屬性，我這里用到的選中的自定義屬性是this_page。當我給那個li添加上這個class名時，就能讓這一頁選中。這里就實現了下面控制上面了。但是這樣顯然是不完整的， 應該是一個雙向控制，點擊上面的li，也應該能控制下面的滑動，所以就繼續尋找，找到了另一個方法。
1 $("#header li").click(function () { 2 var index = $(this).index(); 3 $(this).siblings("li").removeClass("this_page"); 4 $(this).addClass("this_page"); 5 console.log(index); 6 mySwiper.slideTo(index); 7 })
及時slideTo(index)方法。請看官方的解釋：控制Swiper切換到指定slide。然后它里面能傳輸三個參數，這三個參數的具體用法請看下面你的表格
| 參數名 | 類型 | 是否必填 | 描述 |
|---|---|---|---|
| index | num | 必選 | 指定將要切換到的slide的索引 |
| speed | num | 可選 | 切換速度(單位ms) |
| runCallbacks | boolean | 可選 | 設置為false時不會觸發transition回調函數 |
到此，我就實現了雙向控制，點擊上面的li能控制下面的滑動，下面的滑動，也能更改上面的選中。如果還有什么問題，歡迎留言或者自行查看官網API文檔