斯威珀滑雪板在滑轨外的渲染字幕

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

可能是，您可以在每次出现新的活动幻灯片时捕获en 事件 (如slideChange )来运行您的函数updateCaptions。类似于：

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