<div class="sample 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-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__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sample.splide:not(.is-active) .splide__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 240px);
  gap: 8px;
}

const options = {
  mediaQuery: "min", 
  perMove: 1,
  gap: 16, 
  cover: true,
  heightRatio: 0.5,
  updateOnMove: true,
  padding: "5rem",
  type: "loop",
  focus: "center",
  trimSpace: false,
  breakpoints: {
    600: {
      destroy: true,
    },
  },
};

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