La lecture automatique de Swiper s'arrête si vous changez d'onglet ou réduisez le navigateur

Question

J'ai fait une progression de lecture automatique pour le curseur en utilisant CSS. Lorsque la classe d'activité est ajoutée à la pagination, j'exécute une animation CSS qui dure aussi longtemps que le délai de lecture automatique du curseur. Tout fonctionnera correctement si vous ne changez pas d'onglet du navigateur ou ne réduisez pas le navigateur. Dès que nous changeons d’onglet, la lecture automatique du curseur se met en pause et provoque l’arrêt de l’animation. Peut-être que quelqu'un sait comment l'influencer ?

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 au problème :

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

Merci Xena Lesenkova

Answer 1

Le curseur Swiper semble suspendre la lecture automatique après avoir basculé entre les onglets du navigateur. Lorsque vous revenez en arrière, il recommencera à afficher la diapositive actuelle. Essayez de redémarrer l'animation de progression lorsque l'onglet avec le curseur devient visible.

document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
        // restart animate progress
    } else {
       // stop animate progress
    }
})