WordPressでswiperの無限スライダーを実装する

備忘録です。

①headrの</head>直前に追加する

  <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
  <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

②footerの</body>直前に追加する

<script>
const swiper = new Swiper(".swiper", {
  pagination: {
    el: ".swiper-pagination",
  },
  // 前後スライドボタンを表示
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  loop: true, // ループの有効化
  slidesPerView: 3.0,
  slidesPerGroup: 1,
  initialSlide: 1,
  spaceBetween: 15,
  centeredSlides : true,
});
</script>

③style.cssでデザイン調整をする

.swiper-slide img {
  width: 100%;
  height: auto;
}

.swiper-slide {
  width: initial;
}