var percentTime;
var tick;
var progressBar = document.querySelector('.js-mainvisual-progress');
var mySwiper = new Swiper('.js-mainvisual-container', {
effect: 'slide',
loop: true,
speed: 400,
slidesPerView: 1,
spaceBetween: 30,
grabCursor: false,
watchOverflow: true,
easing: 'ease-in',
keyboard: {
enabled: true,
onlyInViewport: true
},
watchOverflow: true,
watchSlidesProgress: true,
watchSlidesVisibility: true,
roundLengths: true,
autoplay: {
delay: 3000,
disableOnInteraction: false
},
on: {
slideChange: function () {
var swiper = this;
var defaultSlideDelay = swiper.params.autoplay.delay;
var currentIndex = swiper.realIndex + 1;
var currentSlide = swiper.slides[currentIndex];
var currentSlideDelay = currentSlide.getAttribute('data-swiper-autoplay') || defaultSlideDelay;
updateSwiperProgressBar(progressBar, currentSlideDelay);
}
}
});
function updateSwiperProgressBar(bar, slideDelay) {
let tick;
function startProgressBar() {
resetProgressBar();
tick = requestAnimationFrame(progress);
}
function progress() {
var timeLeft = getTimeout(mySwiper.autoplay.timeout);
if (mySwiper.autoplay.running && !mySwiper.autoplay.paused) {
percentTime = sanitisePercentage(100 - (timeLeft / slideDelay * 100));
bar.style.width = percentTime + 5 + '%';
bar.style.transition = 'width ' + percentTime + 'ms linear';
if (percentTime > 100) {
resetProgressBar();
}
}
if (mySwiper.autoplay.paused) {
percentTime = 0;
bar.style.width = 0;
}
tick = requestAnimationFrame(progress);
}
function resetProgressBar() {
percentTime = 0;
bar.style.width = 0;
cancelAnimationFrame(tick);
}
startProgressBar();
}
