swiper странно работает при hover

Question

swiper странно работает при hover

Рейтинг: 0Ответов: 0Опубликовано: 19.05.2023

сделал чтобы останавливался сразу при наведении, но нижний блок начинает бешено крутиться и верхний теряет скорость после нескольких наведений

      const partnerslisttop = document.querySelector('.partners__list_top');
      var transformValue;
      if(!partnerslisttop){} else {
      var partnerstop = new Swiper('.partners__list_top', {
         loop: true,
         loopedSlides: 5,
         slidesPerView: 5,
         slidesPerGroup: 1,
         autoplay : true,
         speed: 3000,
         autoplay: {
            delay: 1,
            pauseOnMouseEnter: true,
            disableOnInteraction: false,
         },
      });
      }
      var transformValue;
      const partnerslistbottom = document.querySelector('.partners__list_bottom');
      if(!partnerslistbottom){} else {
      var partnersbottom = new Swiper('.partners__list_bottom', {
         loop: true,
         loopedSlides: 5,
         slidesPerView: 5,
         slidesPerGroup: 1,
         speed: 3000,
         autoplay: {
            delay: 1,
            reverseDirection: true,
            pauseOnMouseEnter: true,
            disableOnInteraction: false,
         },
      });
      }
      var ptl = document.querySelector('.partners__list_top .partners__list');
      partnerstop.el.addEventListener('mouseenter', () => {
      partnerstop.autoplay.stop();
      transformValue = ptl.style.transform;
      ptl.style.transitionDuration = "0ms";
      ptl.style.transform = "translate3d(" + partnerstop.getTranslate() + "px, 0px, 0px)";
      });
      partnerstop.el.addEventListener('mouseleave', () => {
      ptl.style.transform = transformValue;
      ptl.style.transitionDuration = "3000ms";
      partnerstop.autoplay.start();
      });
      var pbl = document.querySelector('.partners__list_bottom .partners__list');
      partnersbottom.el.addEventListener('mouseenter', () => {
      partnersbottom.autoplay.stop();
      transformValue = pbl.style.transform;
      pbl.style.transitionDuration = "0ms";
      pbl.style.transform = "translate3d(" + partnersbottom.getTranslate() + "px, 0px, 0px)";
      });
      partnersbottom.el.addEventListener('mouseleave', () => {
      pbl.style.transform = transformValue;
      pbl.style.transitionDuration = "3000ms";
      partnersbottom.autoplay.start();
      partnersbottom.params.reverseDirection = true;
      });

      .partners__list_top .swiper-wrapper, .partners__list_bottom .swiper-wrapper {
      -webkit-transition-timing-function: linear !important;
      -moz-transition-timing-function: linear !important;
      -ms-transition-timing-function: linear !important;
      -o-transition-timing-function: linear !important;
      transition-timing-function: linear !important;
      }

      .partners__list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100vw;
      }

      .partners__item {
      width: 380px;
      height: 130px;
      }

      .partners__item img {
      width: 100%;
      height: 100%;
      max-height: 50%;
      object-fit: contain;
      }

      .partners__item a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      -webkit-transition: background-color 0.2s linear;
      -moz-transition: background-color 0.2s linear;
      -ms-transition: background-color 0.2s linear;
      -o-transition: background-color 0.2s linear;
      transition: background-color 0.2s linear;
      }

      .partners__item a:hover {
      background-color: var(--blue);
      }

      .partners__block {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      height: 100%;
      padding: 0 50px;
      align-items: center;
      justify-content: center;
      }

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <section class="partners" data-scroll-section>
      <div class="container partners__container">
        <div class="partners__list_top swiper-container">
          <ul class="partners__list swiper-wrapper">
            <li class="partners__item swiper-slide">
              <a href="#"><span class="partners__block">Slide 1</span></a>
            </li>
            <li class="partners__item swiper-slide">
              <a href="#"><span class="partners__block">Slide 2</span></a>
            </li>
            <li class="partners__item swiper-slide">
              <a href="#"><span class="partners__block">Slide 3</span></a>
            </li>
            <li class="partners__item swiper-slide">
              <a href="#"><span class="partners__block">Slide 4</span></a>
            </li>
            <li class="partners__item swiper-slide">
              <a href="#"><span class="partners__block">Slide 5</span></a>
            </li>
          </ul>
        </div>
        <div class="partners__list_bottom swiper-container">
          <ul class="partners__list  swiper-wrapper">
            <li class="partners__item swiper-slide">
              <a href="#"><span class="partners__block">Slide 1</span></a>
            </li>
            <li class="partners__item swiper-slide">
              <a href="#"><span class="partners__block">Slide 2</span></a>
            </li>
            <li class="partners__item swiper-slide">
              <a href="#"><span class="partners__block">Slide 3</span></a>
            </li>
            <li class="partners__item swiper-slide">
              <a href="#"><span class="partners__block">Slide 4</span></a>
            </li>
            <li class="partners__item swiper-slide">
              <a href="#"><span class="partners__block">Slide 5</span></a>
            </li>
          </ul>
        </div>
      </div>
   </section>
   <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
</body>
</html>

javascript

Источник: Stack Overflow на русском

swiper странно работает при hover

Ответы