<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-05.jpg" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-06.jpg" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-07.jpg" alt="">
    </div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

body {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.swiper-slide img {
  object-fit: cover; 
  width: 100%;
  height: 300px;
}

.swiper-slide {
  height: auto;
}

const option = {
  loop: true,
  effect: "cube",
  speed: 2000,
  autoplay: {
    delay: 3000,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
};

const mySwiper = new Swiper(".swiper", option);