滑动条之外的滑动条中的渲染标题

问题描述 投票:1回答:1

我正在使用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()

但是脚本只向我返回第一张(初始)幻灯片的标题。当我浏览幻灯片时,字幕不会被新的(活动)字幕替换。

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

javascript pagination swiper caption
1个回答
0
投票

也许您可以像event一样catch en slideChange在每次有新的活动幻灯片时运行功能updateCaptions。像:

var mySwiper = new Swiper('.swiper-container');
mySwiper.on('slideChange', function () {
  updateCaptions();
});
© www.soinside.com 2019 - 2024. All rights reserved.