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

.swiper-slide {
  overflow: hidden;
}

.swiper-slide figure {
  display: block;
  margin: 0 0 0 -10%;
  width: calc(100% + 20%);
  max-width: calc(100% + 20%);
  overflow: hidden;
}
.swiper-slide figure img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

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

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