【Swiper】パララックススライダーを作る方法【サンプル付き】

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-img" data-swiper-parallax-x="90%">
        <img
          src=“画像パス”
          alt=""
        />
      </div>
      <div class="swiper-text">
        <h3 class="swiper-title">チワワ</h3>
        <p class="swiper-desc" data-swiper-parallax-x="70%">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
  </div>
  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
  <!-- 前後の矢印 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

.swiper {
  height: 67vw;
}
.swiper-slide {
  overflow: hidden;
}
.swiper-slide img {
  height: auto;
  width: 100%;
}
.swiper-text {
  color: #fff;
  left: 5%;
  position: absolute;
  text-shadow: 1px 1px 2px #333;
  top: 50%;
  width: 60%;
}
.swiper-title {
  font-size: clamp(16px, 3vw, 50px);
  font-weight: 700;
}
.swiper-desc {
  font-size: clamp(12px, 2vw, 30px);
  line-height: 1.5;
  margin-top: 3%;
}

const swiper = new Swiper(".swiper", {
  loop: true, // ループさせる
  parallax: true, // パララックスさせる
  allowTouchMove: false, // マウスでのスワイプを禁止
  speed: 1500, // 少しゆっくり(デフォルトは300)
  autoplay: { // 自動再生
    delay: 2000, // 2秒後に次のスライド
    disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
  },
  // ページネーション
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  // 前後の矢印
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});