idangerous swiper，分頁數

Question

可以在每個「swiper-pagination-switch」跨度中顯示幻燈片的編號嗎？ （如：1,2,3，...）？

默認情況下，該插件創造HTML的一部分這樣的：

<div class="pagination"> 
    <span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span> 
    <span class="swiper-pagination-switch"></span> 
    <span class="swiper-pagination-switch"></span></div> 
</div> 

我想噸插入到每個跨越與其相關幻燈片的編號，例如：

<div class="pagination"> 
    <span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch">1</span> 
    <span class="swiper-pagination-switch">2</span> 
    <span class="swiper-pagination-switch">3</span></div> 
</div> 

我如何做到這一點？

謝謝。

Answer 1

這是我的解決方案，有點髒，但它做的工作：

var Swiper_slider = slider.swiper({ 
      pagination:   '.slider_pagination', 
      paginationClickable: true, 
      mode:    'horizontal', 
      loop:    true, 
      speed:    600, 
      autoplay:   5000, 
      paginationElement: 'a', 
      onSwiperCreated: function(){ 

       $('.slider_pagination a').each(function(key){ 
        $(this).html(key + 1); 
       }); 

      } 
}); 

一旦滑塊創建一個.each()環路上添加分頁元素的數字。

雅尼克

Answer 2

組隊，探索V3.1.0將有以下的參數，它支持此功能。

paginationBulletRender(index, className) 

Answer 3

在組隊，探索V3.3.1

有演示其可能適合你的問題被稱爲包含在下載的zip 29定製pagination.html：

與選項：

var swiper = new Swiper('.swiper-container', { 
    pagination: '.swiper-pagination', 
    paginationClickable: true, 
    paginationBulletRender: function (index, className) { 
     return '<span class="' + className + '">' + (index + 1) + '</span>'; 
    }