用 html 中的文本替换 Swiper 分页

Question

我的滑动分页遇到了困难，我将分页更改为文本，单击事件运行良好，但活动类不会循环其他分页，并且自动播放也不起作用。但如果我只用 (index + 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>';

},

这是一个工作的小提琴

Answer 2

我无法使用 bobharley 的小提琴样本将标签显示在子弹上