如何在Swiper中沿着上一个/下一个箭头添加动态标签？

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

Answer 2

需要在每次幻灯片更改时更新我的导航标签，上面的解决方案在滑动器初始化上工作得很好，但在幻灯片更改上却不起作用。我发现 swiper 现在会在下一张和上一张幻灯片上添加类，所以我使用了它们。我使用

innerHtml

而不是

textContent

，因为我需要用多个部分来格式化标签。所以这对我有用：

function addLabels() {
  let mySlider = document.querySelector('#main-swiper');
  let nextSlide = mySlider.querySelector('.swiper-slide-next');
  let prevSlide = mySlider.querySelector('.swiper-slide-prev');

  let labelPrev, labelNext;

  if (prevSlide) {
    labelPrev = prevSlide.querySelector('span.label').innerHTML;
  } else {
    labelPrev = '';
  }

  if (nextSlide) {
    labelNext = nextSlide.querySelector('span.label').innerHTML;
  } else {
    labelNext = '';
  }

  mySlider.querySelector('.swiper-button-prev .nav-label--prev').innerHTML = labelPrev;
  mySlider.querySelector('.swiper-button-next .nav-label--next').innerHTML = labelNext;

}

为了更新每次幻灯片更改上的标签，我使用了

transitionEnd

滑动事件（而不是

slideChange

！）

let mySwiper = new Swiper('.my-swiper', {
  
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  on: {
    init: function () {
      addLabels();
    },

    transitionEnd: function () {
      addLabels();
    }
  },
});