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

2023.06.03 ライフハック

WordPressに、端まで来ても止まらずぐるぐる回り続けるスライダーを入れる手順です。使うのはSwiperのバージョン7。jQueryは不要で、CDNから2ファイル読み込むだけで動きます。

この記事のコードで作れるのは、こういう動きのスライダーです。

スライドが3枚並んで、真ん中が中央に来る
最後まで行っても最初に戻らず、そのまま回り続ける（無限ループ）
前後の矢印ボタンと、下に丸いページネーションがつく

① CSSとJavaScriptを読み込む

CSSはheader.phpの</head>直前に追加します。

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

JavaScriptはfooter.phpの</body>直前に追加します。

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

JavaScriptをheadに入れないのがポイント。後述する初期化のコードは、このswiper-bundle.min.jsが読み込み終わったあとに動かす必要があります。順番が逆になるとSwiper is not definedで止まります。

② HTMLの入れ物を作る

スライダーを置きたい場所に、この入れ物を書きます。クラス名は変えられません。Swiperがこの名前を探して動くので、1文字でも違うと何も起きません。

<div class="swiper">
  <div class="swiper-wrapper">

    <div class="swiper-slide">
      <img src="画像1のURL" alt="tiptop — 国産WordPressテーマ。プロ品質のサイトを、もっと手軽に。はじめての人にも、慣れた人にも。tiptopで作ったサイトのトップページの画面">
    </div>
    <div class="swiper-slide">
      <img src="画像2のURL" alt="tiptop — 国産WordPressテーマ。プロ品質のサイトを、もっと手軽に。はじめての人にも、慣れた人にも。tiptopで作ったサイトのトップページの画面">
    </div>
    <div class="swiper-slide">
      <img src="画像3のURL" alt="tiptop — 国産WordPressテーマ。プロ品質のサイトを、もっと手軽に。はじめての人にも、慣れた人にも。tiptopで作ったサイトのトップページの画面">
    </div>
    <div class="swiper-slide">
      <img src="画像4のURL" alt="tiptop — 国産WordPressテーマ。プロ品質のサイトを、もっと手軽に。はじめての人にも、慣れた人にも。tiptopで作ったサイトのトップページの画面">
    </div>
    <div class="swiper-slide">
      <img src="画像5のURL" alt="tiptop — 国産WordPressテーマ。プロ品質のサイトを、もっと手軽に。はじめての人にも、慣れた人にも。tiptopで作ったサイトのトップページの画面">
    </div>

  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination"></div>
</div>

入れ物は3階層です。

.swiper … 一番外側。はみ出した部分を隠す枠
.swiper-wrapper … 横に動く帯。ここは触らない
.swiper-slide … 1枚ぶんのスライド。中身は画像でもテキストでも自由

矢印とページネーションの3つのdivは、.swiperの中・.swiper-wrapperの外に置きます。中に入れてしまうとスライドと一緒に流れていきます。

※ 一番外側のクラスが.swiperなのはSwiper 6以降です。5以前の記事では.swiper-containerになっているので、コードを混ぜないよう気をつけてください。

③ 初期化のスクリプトを書く

footer.phpの</body>直前、①で読み込んだswiper-bundle.min.jsのあとに置きます。

<script>
const swiper = new Swiper(".swiper", {
  loop: true,            // ループの有効化
  slidesPerView: 3.0,    // 一度に見せる枚数
  slidesPerGroup: 1,     // 1回のスワイプで送る枚数
  initialSlide: 1,       // 最初に選ばれているスライド（0から数える）
  spaceBetween: 15,      // スライドの間隔（px）
  centeredSlides: true,  // 選ばれているスライドを中央に置く
  pagination: {
    el: ".swiper-pagination",
  },
  navigation: {          // 前後スライドボタンを表示
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});
</script>

無限に回るのはloop: trueのおかげです。Swiperが内部でスライドを複製して、端が来ないように見せています。

3枚並べて真ん中を主役にしたいときは、slidesPerViewとcenteredSlides: trueをセットで指定します。slidesPerView: 3.0を2.5のような小数にすると、両端のスライドが少し見切れて「まだ続きがある」感じが出ます。

④ CSSで見た目を整える

style.cssに追加します。

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

.swiper-slide {
  width: initial;
}

1つ目は画像をスライドの幅に合わせるための指定。これが無いと画像の実寸のまま表示されて、はみ出したり高さがバラついたりします。

2つ目のwidth: initialは、Swiper側のCSSが.swiper-slideに付けている幅を打ち消すためのものです。スライドの幅を中身に合わせたいときだけ入れてください。3枚きっちり等幅で並べたい場合は、この指定は要りません。入れると崩れることがあります。

うまく動かないときに見るところ

スライドが縦に並んでしまう

CSSが読み込めていない状態です。①のCSSのURLと、</head>直前に入っているかを確認してください。

何も起きない・コンソールに Swiper is not defined と出る

③の初期化スクリプトが、①のJavaScriptより先に動いています。どちらも</body>直前で、読み込み → 初期化の順に並べてください。

ループの途中で不自然な隙間ができる

スライドの枚数不足です。Swiperはループのためにスライドを複製するので、slidesPerViewより枚数が少ないと複製が足りず、動きが途切れます。3枚見せるなら、スライドは最低でも5〜6枚用意してください。枚数を増やせないときは、同じスライドを複製して並べるという手もあります。

矢印やページネーションが一緒に流れていく

3つのdivが.swiper-wrapperの中に入っています。②のとおり、.swiperの直下に出してください。

投稿一覧をスライダーにしたい場合

この記事は画像を手で並べる形です。ブログの投稿を自動で流し込みたい場合は、WP_Queryでループを回して.swiper-slideを出力する形になります。そちらは別記事にまとめてあります。

swiperで投稿一覧をスライダーにする

なお、テーマファイルを直接さわる場合は子テーマで作業してください。親テーマを書き換えると、テーマの更新で消えます。

テーマ側をカスタマイズする前提で、土台になるシンプルなWordPressテーマを探している場合は、国産テーマのtiptopも候補にどうぞ。設定項目を絞ってあるので、CSSやテンプレートを自分で足していく作り方に向いています。