如何在 Swiper 中沿 prev/next 箭头添加动态标签？

Question

您已经在其他滑块上看到了这一点，除了导航箭头之外，您还有一些标签/标题，指示下一张/上一张幻灯片的内容。

希望有人已经这样做了，所以我可以复制和调整代码。如果失败了，我想我会尝试不同的事件监听器，从同级幻灯片中提取文本，并更改​​活动幻灯片的导航 div 的内容。

虽然将标签文本保存为数据属性可能会更好？我不知道。只是在这里集思广益......

Answer 1

我想通了。我没有跟踪活动幻灯片，而是在初始化滑动器时添加标签。在这里分享一下，以防这里有人有类似的问题。

let homeSwiper = new Swiper('.home-swiper', {
      loop: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on: {
        init: function () {
          addLabels();
        },
      },
    });

每张幻灯片都有一个隐藏的跨度，我将其用作标签。然后我从周围的幻灯片中拉出这些标签：

  function addLabels() {
    let homeSlides = document.querySelectorAll('.home-slider .swiper-slide');
    homeSlides.forEach((slide, i) => {
      let labelPrev, labelNext;

      if (i === 0) {
        labelPrev = homeSlides[homeSlides.length - 1].querySelector('span.label').textContent;
        labelNext = homeSlides[i + 1].querySelector('span.label').textContent;
      } else if (i === homeSlides.length - 1) {
        labelPrev = homeSlides[i - 1].querySelector('span.label').textContent;
        labelNext = homeSlides[0].querySelector('span.label').textContent;
      } else {
        labelPrev = homeSlides[i - 1].querySelector('span.label').textContent;
        labelNext = homeSlides[i + 1].querySelector('span.label').textContent;
      }
      slide.querySelector('.slide-nav-label--prev').textContent = labelPrev;
      slide.querySelector('.slide-nav-label--next').textContent = labelNext;
    })
  }