国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

我使用 CSS 為滑動(dòng)器制作了自動(dòng)播放進(jìn)度。當(dāng)活動(dòng)類(lèi)添加到分頁(yè)時(shí)，我會(huì)運(yùn)行一個(gè) CSS 動(dòng)畫(huà)，該動(dòng)畫(huà)的持續(xù)時(shí)間與滑動(dòng)器自動(dòng)播放延遲一樣長(zhǎng)。如果您不切換瀏覽器選項(xiàng)卡或不最小化瀏覽器，一切都會(huì)正常工作。一旦我們切換選項(xiàng)卡，滑動(dòng)器自動(dòng)播放就會(huì)暫停并導(dǎo)致動(dòng)畫(huà)停止。也許有人知道如何影響它？

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 問(wèn)題的解決辦法：

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

謝謝謝娜·萊森科娃