swiper的使用之一：自定義分頁器pagiantion

今天項目用到swiper的自定義分頁器，由於官網寫的比較簡單，而在網上看到也多數是以前版本的實例。經過多篇博客的參考，最后終於寫出來了。

使用版本

我使用的是3版本以上，而發現以前的版本和新版API上面有些差別，所以這兒就主要以3+版本為參考。

使用的API

做自定義分頁器的時候，我們需要使用pagination的type和renderCustom這兩個參數。

panigation: {
    type: 'custom',
    renderCustom: function(swiper, current,total){}

}

 

技術分析

在做自定義分頁器的時候，swiper會自動幫我們在定義分頁器時的元素“.swiper-pagination”加上".swiper-pagination-custom"，如果前面已經在.swiper-pagination上面加了樣式，就不需要在寫樣式了，沒有就需要給"swiper-pagination-custom"定義樣式（我做的時候沒有加樣式）

再定義兩個類".swiper-pagination-customs"和".swiper-pagination-customs-active"，用來自定義需要的分頁器樣式（.swiper-pagination-customs自定義，但是另一個必須是active用來定義選中時的樣式）

在renderCustom中循環輪播的頁面，將新的分頁器添加進去

let appSwiper = new Swiper('.swiper-comtainer',function(){
   pagination:{
      el: '.swiper-pagination',
      // 自定義分頁器，必須的type類型
      type: 'custom',
      renderCustom: function(swiper,current, total){
        var paginationHtml = "";
        for(var i= 0; i< total; i++) {
         // 判斷是不是激活焦點，是的話添加active類，不是就只添加基本樣式類
           if(i === (current -1)){
              paginationHtml = '<span class="swiper-pagination-customs swiper-pagination-customs-activ"></span>';
            }
              paginationHtml = '<span class="swiper-pagination-customs"></span>';
         }
        return paginationHtml;
     }
  } 

})

 到這兒就完成了自定義分頁器樣式的整個過程了，快去試試吧。