Swiper中的自定义分页

Question

我使用Swiper并希望自定义分页。这个问题被回答了here，但我误解了，如何使该分页点击，没有任何工作。我究竟做错了什么？

$(document).ready(function() { 
    var mySwiper = new Swiper('.swiper-container', { 
     nextButton: '.swiper-button-next' 
     , prevButton: '.swiper-button-prev' 
     , pagination: '.swiper-pagination' 
     , paginationClickable: true 
     , paginationHide: false 
     , paginationType: 'custom' 
     , paginationElement: 'div' 
     , paginationCustomRender: function (swiper, current, total) { 
      var names = []; 
      $(".swiper-wrapper .swiper-slide").each(function (i) { 
       names.push($(this).data("name")); 
      }); 
      var text = ""; 
      for (let i = 1; i <= total; i++) { 
       if (current == i) { 
        text += "<div class='swiper-pagination-container swiper-pagination-container-active'><div class='swiper-pagination-icon swiper-pagination-icon-active'></div><div>" + names[i] + "</div></div>"; 
       } 
       else { 
        text += "<div class='swiper-pagination-container'><div class='swiper-pagination-icon'></div><div>" + names[i] + "</div></div>"; 
       } 
      } 
      return text; 
     } 
    }); 
    $(".swiper-pagination-container").on("click", function() { 
     mySwiper.slideTo($(".swiper-pagination-container").index(this) + 1); 
    }); 
} 

不同的是，我把.swiper，包装外.swiper-分页格：

 <div class="swiper-pagination"></div> 
     <div class="swiper-container"> 
      <div class="swiper-wrapper"> 
       <div class="swiper-slide" data-name="7 сентября">Slide 1</div> 
       <div class="swiper-slide" data-name="10 декабря">Slide 2</div> 
       <div class="swiper-slide" data-name="14-23 декабря">Slide 3</div> 
       <div class="swiper-slide" data-name="30 декабря">Slide 4</div> 
       <div class="swiper-slide" data-name="5-6 февраля">Slide 5</div> 
       <div class="swiper-slide" data-name="8 февраля">Slide 6</div> 
       <div class="swiper-slide" data-name="9 февраля">Slide 7</div> 
      </div> 
      <div class="swiper-button-prev"></div> 
      <div class="swiper-button-next"></div> 
     </div> 

Answer 1

很简单，试试吧：

window.mainSlider = new Swiper('.swiper-container', { 
     nextButton: '.swiper-button-next' 
    , prevButton: '.swiper-button-prev' 
    , pagination: '.swiper-pagination' 
    , paginationClickable: true 
    , paginationHide: false 
     paginationBulletRender  : function (index, className) { 
     var slide = $('.' + this.wrapperClass).find('[data-name]')[index], 
      label = $(slide).attr('data-name'); 
     return '<span class="' + className + '">' + (typeof label !== 'undefined' ? name : '') + '</span>'; 
    } 
}); 

Answer 2

我尝试这样做，它将swiper的循环设置为true，如果循环设置为false，只需从索引中删除+1即可。

pagination: { 
     el: $('.your_class').find('.swiper-pagination'),// to find the swiper-pagination you put outside of the swiper-container 
     clickable: true, 
     renderBullet: function (index, className) { 
      var slider_array = []; 
      var el = $('.swiper-container') 
      el.find('[data-name]').each(function() { 
       slider_array.push($(this).data('name')); 
      }); 

      console.log(slider_array); 
      return '<span class="' + className + '">' + slider_array[index + 1] + '</span>'; 
     } 
    }