Question

使用swiper.js v4.0.6我想使用renderCustom API在分页栏上显示自定义名称。

我需要显示三张幻灯片，以及我在HTML中使用data-属性设置的相应名称。

我的大部分工作都有效，但商品名称没有以正确的顺序显示;

第一张幻灯片显示名称＆＃39;项目2＆＃39;
第二张幻灯片显示名称＆＃39;第3项＆＃39;
第三张幻灯片显示名称＆＃39; undefined＆＃39;

这里是fiddle，代码在下面。

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>

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',
  }
});

我认为解决方案可能很简单，我在loop中遗漏了一些内容，我们对此感到非常感激。

Answer 1

Swiper使用0启动循环（与许多其他语言一样），而不是一个。因此，您在循环中遇到了经典的逐个错误。只需在循环子句中使用以下内容：

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

应该这样做：）

Swiper.js自定义分页名称

1 个答案: