在 Slide 之外的 Swiper Slider 中渲染字幕

Question

我正在使用 swiper.js 滑块 (https://swiperjs.com) 并希望通过 data-attributes 向幻灯片添加字幕并在固定的 div 外部呈现它们我的幻灯片（我正在使用立方体效果并且不希望它们移动）：

<div class="swiper-container"> 
    <div class="swiper-caption"></div>
    <div class="swiper-wrapper"> 
        <div class="swiper-slide" data-caption="caption-1"></div>
        <div class="swiper-slide" data-caption="caption-2"></div>
        <div class="swiper-slide" data-caption="caption-3"></div>
        ...
    </div>
</div>

在 js 中，我正在抓取活动幻灯片及其标题：

var activeSlide = document.querySelector('div.swiper-slide-active');
var caption = activeSlide.dataset.caption;

并尝试在我的字幕中呈现它 div:

var updateCaptions = function () {
    if (activeSlide.hasAttribute('data-caption')) {
        captions.innerHTML = caption
    };
}
updateCaptions()

但脚本 returns 我只是第一张（初始）幻灯片的标题。当我滑过幻灯片时，标题没有被新的（活动的）标题替换。

如何在每次有新的活动幻灯片时再次使功能运行？

Answer 1

也许你可以 catch en event like slideChange to 运行 your function updateCaptions 每次有新的活动幻灯片。像 :

var mySwiper = new Swiper('.swiper-container');
mySwiper.on('slideChange', function () {
  updateCaptions();
});

在 Slide 之外的 Swiper Slider 中渲染字幕

Render caption in Swiper Slider outside of Slide

javascript

pagination

caption

swiper