Swiper.jsのサムネイル画像とスライダーを連動させる

スライダープラグインのSwiper.jsのカスタマイズでちょっと詰まったところがあったのでメモっておきます。

Contents

ページネーションにサムネイル画像を使う

スライドの下にサムネイルが出て、スライドと連動して現在表示している画像に装飾が出るようにしていきます。
↓こういうの。スライドの下にサムネイル画像が出て連動する感じ。

今回は、ページネーション（●が並ぶやつ）に背景画像にスライドの画像を設定する方法で実装できました。

とある方が「swiperのスライドを2つ置けば連動しているように見せることができる」と書いていましたが、そうするとサムネイルをクリックした時にその画像をスライドに表示することができないので、今回はサムネイル機能や複数のスライダーを使わずにページネーションを改造していきます！

STEP1 ページネーションをスライド外に置く

SwiperのデモのPagenationにある丸をスライドの外（下）に置きたい場合、bottomをマイナス数値にしても親要素のoverflow:hiddenで隠れてしまいます。
そこで、swiper-pagenationクラスのpositionをrelativeにすると、スライドの外、下にページネーションが出るようになります。

.swiper-pagination{
  position:relative; /* absoluteからrelativeに */
}

.swiper-container-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-custom, .swiper-pagination-fraction{
  bottom: -50px; /*bottomの数値をマイナスに*/
}

参考:Swiper.jsでページネーションボタンをスライド外に配置できない

STEP2 ページネーションをCSSで大きくする

画像を配置できるように、まずはサイズを大きくします。円形の場合、swiper-pagination-bulletクラスをいじると大きさが変わるはずです！デフォルトは8pxなので、90くらいにしてみます。

.swiper-pagination-bullet {
    width: 90px;　/*大きさ*/
    height: 90px;　/*大きさ*/
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: .2;
}

STEP3 サムネイル画像を配置する

CSSのbackground-imageを追加します。
さらに、先ほどのCSSにbackground-size:coverをつけて、どんな画像でも大丈夫なようにしておきます。

.swiper-pagination-bullet {
    width: 90px; /*大きさ*/
    height: 90px; /*大きさ*/
    display: inline-block;
    border-radius: 100%;
    background: #FFFFFF;
    opacity: 0.5; /*不透明度*/
    box-shadow: none;
    border: solid 3px #FFFFFF;
    background-size: cover; /*画像の伸縮*/
    background-image: url(●●);
}