Как в слайдере Swiper сделать автоматически заполняющийся прогрессбар

Рейтинг: 0Ответов: 1Опубликовано: 07.04.2023

Вот тут пытаюсь сделать, но пока все одновременно заполняются, а как сделать по очереди для каждого слайда? или может вообще надо по другому https://codepen.io/dima2323/pen/WNabNKx

    const progressRows = document.querySelectorAll(".autoplay-progress span");
new Swiper('.popup__slider', {
                observer: true,
                observeParents: true,
                slidesPerView: 1,
                autoplay: {
                    delay: 5000,
                    disableOnInteraction: false,
                },
                navigation: {
                    prevEl: '.popup-button-prev',
                    nextEl: '.popup-button-next',
                },
                 on: {
                    autoplayTimeLeft(s, time, progress) {
                         progressRows.forEach(progressRow => {
                             progressRow.style.setProperty("--progress", 1 - progress);
                        });
                        
                    }
                }
            });
swiper.js слайдер
Источник: Stack Overflow на русском

Ответы

▲ 0
const progressRows = document.querySelectorAll(".autoplay-progress");
let swiper;

swiper = new Swiper(".popup__slider", {
observer: true,
observeParents: true,
slidesPerView: 1,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
navigation: {
prevEl: ".popup-button-prev",
nextEl: ".popup-button-next",
},
on: {
init: function () {
  progressRows.forEach((progressRow, index) => {
    progressRow.addEventListener("click", () => {
      swiper.slideTo(index);
    });
  });
},
autoplayTimeLeft(s, time, progress) {
  if (swiper) {
    progressRows.forEach((progressRow, index) => {
      const progressBar = progressRow.querySelector("span");
      if (index === swiper.realIndex) {
        progressBar.style.setProperty("--progress", 1 - progress);
      } else {
        progressBar.style.setProperty("--progress", 0);
      }
    });
  }
},
},
});