<div class="splide" aria-label="動き続けるループスライダー">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-01.jpg" alt="">
      </li>
      <li class="splide__slide">
        <img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-02.jpg" alt="">
      </li>
      <li class="splide__slide">
        <img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-03.jpg" alt="">
      </li>
      <li class="splide__slide">
        <img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-04.jpg" alt="">
      </li>
      <li class="splide__slide">
        <img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-05.jpg" alt="">
      </li>
      <li class="splide__slide">
        <img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-06.jpg" alt="">
      </li>
      <li class="splide__slide">
        <img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-07.jpg" alt="">
      </li>
    </ul>
  </div>
</div>

html, body {
  margin: 0;
  padding: 0;
}

.splide-outer {
  max-width: 960px;
  margin: auto;
}
.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

const options = {
  mediaQuery: "min", 
  fixedWidth: "24rem",
  heightRatio: 0.4,
  gap: 16,
  type: "loop",
  arrows: false,
  drag: "free", 
  flickPower: 100,
  pagination: false,

  autoScroll: {
    speed: 0.5, 
    pauseOnHover: false,
    pauseOnFocus: true,
  },
  breakpoints: {
    1025: {
      gap: 24,
      fixedWidth: "36rem",
    },
  },
};

const splide = new Splide(".splide", options);

splide.mount(window.splide.Extensions);