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

2020 4/15

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

目次

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

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

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

とある方が「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(●●);
}

STEP4 activeのCSSを変更する

今回は現在表示しているサムネイルに枠がつくようにしていますが、.swiper-pagination-bullet-activeクラスが現在表示しているサムネイルのCSSなので、こちらを自由に改造しましょう!

STEP5 paddingを調整する

STEP2で大きめのサムネイル画像にした場合、bottomの数字を大きくするとサムネイルが途中から見えなくなることがあります。
そのときは、.swiper-containerにpadding-bottomをつけて調整し、下に続くコンテンツはmargin-topでずらしてください。

swiperはとても便利で、画像だけでなくdivで囲ったテキストを含むさまざまなスライドを動かすことができます。見た目も自由に改造できるので今後も使っていきたいですね!

あわせて読みたい
Swiperの左右の矢印を変えるCSS
Swiperの左右の矢印を変えるCSS前回に続いて、Swiperのちょっとしたカスタマイズの備忘録を載せておきます。【Swiperの左右の矢印を変えるCSS】矢印の色を変えるswiperの矢印はsvgで書かれていて、例...

Author

Akila@Freelance

Akila@Freelance

趣味でHTMLサイトを作ってWordPressをカスタマイズしていたら職業になった人。WebDesigner/フリーランス/講師

目次
閉じる