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

也许您可以像slideChange一样event 每次运行新的幻灯片时运行功能updateCaptions。像这样的东西：

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

幻灯片外部的滑动滑块中的渲染标题

1 个答案: