Сделать подпись в Swiper Slider за пределами Slide

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>

in 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();
});