swiper一款非常好用的輪播插件，支持移動端和PC端，用過很多次了，這次簡單的總結一下。方便以後查找使用，說明一下，下麵的例子是基於swiper 4.0+版本的，如果你是其他的版本，請自行前往官網查看 至於為什麼使用swiper，而不是自己手寫，請看下麵官網的截圖： 開個玩笑，說白了，就是這個確實 ...
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文檔
