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