【JS/CSS】Swiperで自動で流れ続けるスライダーの実装

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<div class="slider swiper-container">
   <div class="swiper-wrapper">
      <div class="swiper-slide">
         <img src="#" alt="">
      </div>
      <div class="swiper-slide">
         <img src="#" alt="">
      </div>
      <div class="swiper-slide">
         <img src="#" alt="">
      </div>
   </div>
</div>

.slider {
    .swiper-wrapper {
      transition-timing-function: linear;
      .swiper-slide{
        transition: transform 0.3s ease;
      }
      .swiper-slide:hover {
        transform: translateY(-20px);
        transition: transform 0.3s ease;
      }
      img {
        border-radius: var(--border-radius);
        border: solid 1px #E5E5E5;
      }
    }
  }

    document.addEventListener('DOMContentLoaded', function () {
        const swiper2 = new Swiper('.slider', {
            loop: true,
            speed: 5000,
            slidesPerView: 1.5,
            spaceBetween: 10,
            breakpoints: {
                300: {
                    slidesPerView: 1.5,
                    spaceBetween: 10
                },
                800: {
                    slidesPerView: 2,
                    spaceBetween: 20
                },
                1400: {
                    slidesPerView: 3,
                    spaceBetween: 20
                }
            },
            autoplay: {
                delay: 0,
                reverseDirection: true,
            },
        });
    });