I made an auto-play progress for the slider using CSS. When the activity class is added to the pagination, I run a CSS animation that lasts as long as the slider autoplay delay. Everything will work fine if you don't switch browser tabs or minimize the browser. As soon as we switch tabs, the slider autoplay pauses and causes the animation to stop. Maybe someone knows how to affect it?
import Swiper, { Navigation, Pagination, Autoplay } from 'swiper'; const heroSwiper = new Swiper('.hero__swiper', { modules: [Navigation, Pagination, Autoplay], autoplay: { delay: 5000, waitForTransition: false, disableOnInteraction: false, }, slidesPerView: 1, speed: 800, grabCursor: true, navigation: { prevEl: '.hero__navigation-button--prev', nextEl: '.hero__navigation-button--next', }, pagination: { clickable: true, el: '.hero__swiper-pagination', renderBullet: (i, className) => { return `<button class="${className}">${(`0${i + 1}`).slice(-2)}</button>`; }, type: 'bullets', }, });
&__swiper-pagination { position: absolute !important; top: auto !important; bottom: 12px !important; left: 50% !important; display: inline-flex !important; width: auto !important; transform: translateX(-50%) !important; pointer-events: none !important; .swiper-pagination-bullet { position: relative; display: inline-flex; width: auto !important; height: auto !important; margin: 0 24px 0 0 !important; color: #605647; font-size: 16px; line-height: 20px; background: none !important; border-radius: 0 !important; opacity: 1 !important; transition: 0.8s !important; pointer-events: all; &::before { position: absolute; top: 50%; left: 35px; width: 75px; height: 1px; background: rgba(#fff, 0.3); transform: translateY(-50%); visibility: hidden; opacity: 0; transition: 0.8s; content: ""; } &::after { position: absolute; top: 50%; left: 35px; width: 0; height: 1px; background: rgba(#fff, 1); transform: translateY(-50%); visibility: hidden; opacity: 0; transition: 0.8s; content: ""; } &.swiper-pagination-bullet-active { margin-right: 110px !important; color: #fff; &:last-child { margin-right: 0 !important; } &::before { visibility: visible; opacity: 1; } &::after { visibility: visible; opacity: 1; animation: pagination-progress 5s linear; } } &:last-child { margin: 0 !important; } } } @keyframes pagination-progress { 0% { width: 0; } 100% { width: 75px; } }
UPD Solution to the problem:
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') { /* Since swiper is still running in the background and only restarts the animation when the user returns to the tab, it was decided to delete the class. */ if (document.querySelector('.swiper-pagination-bullet-active')) { document.querySelector('.swiper-pagination-bullet-active').classList.remove('swiper-pagination-bullet-active'); } // Without timeout the css animation does not start setTimeout(() => { document.querySelectorAll('.swiper-pagination-bullet')[heroSwiper.activeIndex].classList.add('swiper-pagination-bullet-active'); }, 10); } else { document.querySelector('.swiper-pagination-bullet-active').classList.remove('swiper-pagination-bullet-active'); } });
Thank you Xena Lesenkova
The Swiper slider appears to pause autoplay after switching between browser tabs. When you go back, it will restart showing the current slide again. Try restarting the progress animation when the tab with the slider becomes visible.