在幻灯片之外的 Swiper Slider 中渲染标题

Question

我正在使用 swiper.js 滑块 (https://swiperjs.com) 并希望通过数据属性为幻灯片添加标题并将它们呈现在我的幻灯片外部的固定 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()

但脚本只返回第一张（初始）幻灯片的标题。当我在幻灯片中滑动时，标题不会被新的（活动）标题替换。

每次我有一个新的活动幻灯片时，如何让该函数再次运行？

Answer 1

也许你可以catch en event like slideChange 来运行你的函数updateCaptions 每次有一个新的活动幻灯片。类似的东西：

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