Javascript Swiper.js自定义分页名称

使用swiper.js v4.0.6，我希望使用API在分页栏上显示自定义名称

我需要显示三张幻灯片，以及我使用HTML中的

data-

属性设置的相应名称

我有它的大部分工作，但项目名称没有显示在正确的顺序

• 第一张幻灯片显示名称“项目2”
• 第二张幻灯片显示名称“项目3”
• 第三张幻灯片显示名称“未定义”

下面是一个示例和代码

HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-name="Item 1">
      <p>Testing 1</p>
    </div>
    <div class="swiper-slide" data-name="Item 2">
      <p>Testing 2</p>
    </div>
    <div class="swiper-slide" data-name="Item 3">
      <p>Testing 3</p>
    </div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<div class="swiper-pagination"></div>

测试1

测试2

测试3

JS

var names = [];
$(".swiper-wrapper .swiper-slide").each(function(i) {
  names.push($(this).data("name"));
});
var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'custom',
    renderCustom: function(swiper, current, total) {
      var text = "<span style='background-color:transperent;text-align: center;width:100%; display:block'>";
      for (let i = 1; i <= total; i++) {
        if (current == i) {
          text += "<span style='display:inline-block;border-top:3px solid red;text-align:left;margin-right:4px;width: 20%;color:red;padding:5px;'>" + names[i] + "</span>";
        } else {
          text += "<span style='display:inline-block;border-top:3px solid white;text-align:left; margin-right:4px;width: 20%;color:white;padding:5px;'>" + names[i] + "</span>";
        }
      }
      text += "</span>";
      return text;
    }
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

var name=[]；
$（“.swiper wrapper.swiper slide”）。每个（函数（i）{
names.push（$（this.data（“name”））；
});
var swiper=新的swiper（“.swiper容器”{
分页：{
el:“.swiper分页”，
键入：“自定义”，
RenderCastom：函数（swiper、current、total）{
var text=“”；
for（让i=1；iSwiper以0开始循环（与许多其他语言一样），而不是一个。因此，您在循环中遇到了一个经典的off by one错误。只需在循环子句中使用以下内容：

for (let i = 0; i <= total; i++) {

for（设i=0；i