Swiper.jsの使い方＠WordPress

いかがですか、サムネイル付きスライドショーになっていますね。Swiper.jsはjQuery不要で手軽に多様なスライダーを実装できるということで、色々なサイトを参考にしてやってみたのですが、どうもちゃんと動きません。バージョンが新しくなる度に設定方法などちょいちょい変わるそうなので、最新版を使う場合は頑張って英語を読みながら本家サイトを参考にするのが一番良さそうです。
では上記のサムネ付きスライダーの実装方法をご案内していきます。

実装に必要なもの

Swiper.jsの実装に必要なものは、以下のたった5つだけです。

1. ベースとなるSwiperのCSSファイル「swiper-bundle.min.css」
2. ベースとなるSwiperのJSファイル「swiper-bundle.min.js」
3. イニシャライズ（カスタマイズ）用のJS
4. スライダー表示をカスタマイズする上書き用CSS
5. スライダーを表示させるHTML

1. JSとCSSをダウンロード

読み込みスピードを考えると、ダウンロードしたのちテーマ内にアップロードして使う方がおすすめです。
この記事ではVer.8.0.6で実装していますので、まずは　https://unpkg.com/browse/swiper@8.0.6/　から「swiper-bundle.min.css」と「swiper-bundle.min.js」をダウンロードし、テーマ内ファイルの好きなところに入れて、サーバーにアップロードしましょう。

2.上書き用CSSを追加

スライダー表示をカスタマイズする上書き用のCSSを追加します。テーマ内のCSSに追加してもいいですし、WordPressの「カスタマイズ」から、追加CSS欄に記入してもいいかもしれません。記事内に直接書き込む場合はちょっと工夫が必要ですが、ここでは割愛。追加するCSSは以下の通りです。

.swiper {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper {
    width: 100%;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}
.swiper-slide {
    background-size: cover;
    background-position: center;
}
.mySwiper2 {
    height: 80%;
    width: 100%;
}
.mySwiper {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}
.mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}
.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
}

3. CSSの読み込み用リンクとHTMLを記入

これも実際はWordPressの記事内でPタグやBRタグが入らないようにする必要がありますが、それができることを前提として、以下のようにCSSの読み込みリンクとスライダーを表示させるHTMLを記入します。

<!-- Swiper CSS -->
<link rel="stylesheet"  href="https://<テーマのURL>/swiper-bundle.min.css"/>
<div class="swiper mySwiper2" style="--swiper-navigation-color: #666; --swiper-pagination-color: #666;">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="<画像01のURL>"/></div>
<div class="swiper-slide"><img src="<画像02のURL>"/></div>
<div class="swiper-slide"><img src="<画像03のURL>"/></div>
<div class="swiper-slide"><img src="<画像04のURL>"/></div>
<div class="swiper-slide"><img src="<画像05のURL>"/></div>
<div class="swiper-slide"><img src="<画像06のURL>"/></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="<画像01のURL>"/></div>
<div class="swiper-slide"><img src="<画像02のURL>"/></div>
<div class="swiper-slide"><img src="<画像03のURL>"/></div>
<div class="swiper-slide"><img src="<画像04のURL>"/></div>
<div class="swiper-slide"><img src="<画像05のURL>"/></div>
<div class="swiper-slide"><img src="<画像06のURL>"/></div>
</div>
</div>

style=”–swiper-navigation-color: #666; –swiper-pagination-color: #666;”

となっている部分はナビゲーションボタンの”＜”と”＞”の色を指定しています。お好きな色に適宜変更してください。

また、<div class=”swiper mySwiper2″>　がメインスライダー、<div class=”swiper mySwiper”>がサムネイルスライダーとなっています。

ちなみに、<div class=”swiper-wrapper”> ~ </div> は、メインスライドもサムネイルスライドも同じソースでイケてしまいます。しかし余計な読み込み時間を取らせたくなければ、サムネイルのほうは小さい画像をセットする方がいいですね。

4.スライダー表示HTMLの下にJS読み込みとイニシャライズJSを書き込み

スライダーを表示させるHTMLの下（つまり後）に、JSの読み込みとイニシャライズ用のJSを以下のように書き込みます。

<!-- Swiper JS -->
<script src="<テーマのURL>/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
      var swiper = new Swiper(".mySwiper", {
        loop: true,
        spaceBetween: 10,//サムネイルの隙間
        slidesPerView: 5,//表示するサムネイル数
        freeMode: true,
        watchSlidesProgress: true,
      });
      var swiper2 = new Swiper(".mySwiper2", {
        loop: true,
        spaceBetween: 10,//メインスライドの隙間
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        thumbs: {
          swiper: swiper,
        },
      });
    </script>