如何在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;
})
}