Die automatische Wiedergabe von Swiper stoppt, wenn Sie die Tabs wechseln oder den Browser minimieren
P粉715274052
P粉715274052 2024-02-21 13:37:12
0
1
478

Ich habe mithilfe von CSS einen automatischen Wiedergabefortschritt für den Schieberegler erstellt. Wenn die Aktivitätsklasse zur Paginierung hinzugefügt wird, führe ich eine CSS-Animation aus, die so lange dauert wie die automatische Wiedergabeverzögerung des Schiebereglers. Alles funktioniert einwandfrei, wenn Sie nicht zwischen den Browser-Registerkarten wechseln oder den Browser minimieren. Sobald wir die Tabs wechseln, pausiert die automatische Wiedergabe des Schiebereglers und stoppt die Animation. Vielleicht weiß jemand, wie man es beeinflusst?

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 Lösung des Problems:

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

Vielen Dank, Xena Lesenkova

P粉715274052
P粉715274052

Antworte allen(1)
P粉724256860

在浏览器选项卡之间切换后,Swiper 滑块似乎会暂停自动播放。 当您返回时,它会再次重新开始显示当前幻灯片。 当带有滑块的选项卡变得可见时,尝试重新启动进度动画。

document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
        // restart animate progress
    } else {
       // stop animate progress
    }
})
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage