スワイパーのカスタムページ番号

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を置くことである：それは簡単です

 <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

私はこれを試してみました、それループをtrueに設定してswiperで動作し、ループが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>'; 
     } 
    }