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(); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter