スワイパーの改ページ番号をテキストに変更するにはどうすればいいですか？私のプロジェクトで

Question

：http://moransh4.github.io/Luca/

が、私はこれに最後のセクションでswiper-ページネーション - 弾丸を変更する必要があります。

緑に "アクティブ" 変更。

私は（から：http://idangero.us/swiper/api/）読んで、私はこれをカスタマイズできること：私は行く

paginationBulletRender: function (index, className) { 
     return '<span class="' + className + '">' + (index + 1) + '</span>'; 
    } 

申し訳ありませんが、それでそれを行う方法を

を失いましたか？

Answer 1

かわりに、各div

var mySwiper2 = new Swiper('.swiper-container.shoes', { 
 
    // Optional parameters 
 
    pagination: '.pag-shoes', 
 
    paginationClickable: true, 
 
    nextButton: '.swiper-button-next', 
 
    prevButton: '.swiper-button-prev', 
 
    spaceBetween: 30, 
 
    loop: true, 
 
    paginationType: "custom", 
 
    paginationCustomRender: function(swiper, current, total) { 
 
    var names = []; 
 
    $(".swiper-wrapper .swiper-slide").each(function(i) { 
 
     names.push($(this).data("name")); 
 
    }); 
 
    var text = "<span style='background-color:black;padding:20px;'>"; 
 
    for (let i = 1; i <= total; i++) { 
 
     if (current == i) { 
 
     text += "<span style='border-top:1px solid green;margin-right:4px;color:green;padding:10px;'>" + names[i] + "</span>"; 
 
     } else { 
 
     text += "<span style='border-top:1px solid white;margin-right:4px;color:white;padding:10px;'>" + names[i] + "</span>"; 
 
     } 
 

 
    } 
 
    text += "</span>"; 
 
    return text; 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://moransh4.github.io/Luca/css/swiper.min.css"> 
 
<script src="http://moransh4.github.io/Luca/js/swiper.jquery.min.js"></script> 
 
<div class="swiper-container shoes"> 
 
    <div class="swiper-wrapper"> 
 
    <div class="swiper-slide" data-name="LEVEL1"> 
 
     <img src="http://placehold.it/600x300" alt=""> 
 
    </div> 
 
    <div class="swiper-slide" data-name="DESIGN"> 
 
     <img src="http://placehold.it/600x300" alt=""> 
 
    </div> 
 
    <div class="swiper-slide" data-name="PERFORMANCE"> 
 
     <img src="http://placehold.it/600x300" alt=""> 
 
    </div> 
 
    <div class="swiper-slide" data-name="DESIGN"> 
 
     <img src="http://placehold.it/600x300" alt=""> 
 
    </div> 
 
    </div> 
 
    <!-- Add Pagination --> 
 
    <div class="swiper-pagination pag-shoes"></div> 
 
    <!-- Add Arrows --> 
 
    <div class="swiper-button-next">></div> 
 
    <div class="swiper-button-prev"> 
 
    <</div> 
 
    </div>