スワイパーの改ページをhtmlのテキストで置き換える

Question

私のスワイパーのページ設定に苦労しています。私はテキストにページを変更しましたが、クリックイベントはうまくいきますが、アクティブなクラスは他のページングを繰り返しません。しかし、私はそれを（インデックス+ 1）と置き換える場合、すべてのものがうまく機能します。どんな助けもありがとうございます。

<div class="swiper-pagination swiper-pagination-clickable swiper-pagination- 
bullets" style="background: #fff"> 
    <div class="swiper-pagination-bullet swiper-pagination-bullet-active"> 
    <div class="">1</div> 
    hello there you are 
    </div> 
    <div class="swiper-pagination-bullet">active not</div> 
    <div class="swiper-pagination-bullet">active not</div> 
    <div class="swiper-pagination-bullet ">active not</div> 
</div> 

var swiper = new Swiper('.swiper1',{ 
autoplay: { 
    delay: 1000, 
    disableOnInteraction: true, 
    }, 
disableDraggable: true, 
pagination: { 
    el: '.swiper-pagination', 
    clickable: true, 
    renderBullet: function (index, className) { 
     return '<div class="' + className + '">' + (text) + (index + 1) + 
    '</div>'; 

    }, 
    }, 
loop: true 
}); 

Answer 1

それはReferenceError: text is not definedをスローされますので、これは動作文句を言いません。 どこから来たのですか？

あなたが試すことができます弾丸の内側にカスタムテキストを追加しようとしている場合：

let labels = ['label1', 'label2', 'label3']; 

とあなたが行うことができますrenderBullet機能上：

renderBullet: function (index, className) { 
    return '<div class="' + className + '">' + (labels[index]) + (index + 1) + 
'</div>'; 

}, 

はここで働いてfiddle