Saya membuat kemajuan automain untuk peluncur menggunakan CSS. Apabila kelas aktiviti ditambahkan pada penomboran, saya menjalankan animasi CSS yang bertahan selagi kelewatan automain gelangsar. Semuanya akan berfungsi dengan baik jika anda tidak menukar tab penyemak imbas atau meminimumkan penyemak imbas. Sebaik sahaja kami menukar tab, automain gelangsar berhenti seketika dan menyebabkan animasi berhenti. Mungkin ada yang tahu bagaimana untuk mempengaruhinya?

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 Penyelesaian masalah:

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');
  }
});

Terima kasih Xena Lesenkova