【解説】Swiperでサムネイル付きスライダーの作成方法【サンプルあり】

記事内に広告を含みます

パソ君

・Swiperでサムネイル付きスライダーって作れる？

こんな疑問にお答えします。

デザインによっては、サムネイル付きのスライダーを作る必要ありますよね。

サムネをクリックしたら、メインのスライダーも動くやつ。

あれ実はSwiperでも簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「Swiperでサムネイル付きスライダーの作成方法」について解説していきます！

swiper自体の作り方については下記記事を参考に↓

2023年2月20日【簡単】Swiperの使い方｜初心者向けに解説【オプション】

この記事でわかること

Swiperでサムネイル付きスライダーの作成方法

【解説】Swiperでサムネイル付きスライダーの作成方法【サンプルあり】
【解説】Swiperでサムネイル付きスライダーの作成方法【サンプルあり】：まとめ

【解説】Swiperでサムネイル付きスライダーの作成方法【サンプルあり】

そんなサムネイル付きスライダーのサンプルがこちら↓

See the Pen swiper　サムネイル付きスライダー by jito-coder (@jito-coder) on CodePen.

下にあるサムネイルをクリックしたら、メインの方も連動して動きますよね。

<div class="swiper swiper-main">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide03">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide04">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="">
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<div class="swiper swiper-thumb">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide03">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide04">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="">
        </div>
    </div>
</div>

.swiper-thumb {
    margin-top: 5px;
}

.swiper-thumb .swiper-slide {
    opacity: .5;
    transition: opacity .5s ease;
    cursor: pointer;
}

.swiper-thumb .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
}

window.onload = function() {
    const swiper_thumb = new Swiper(".swiper-thumb", {
        slidesPerView: 4,
    });
    const swiper = new Swiper(".swiper-main", {
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        thumbs: {
            swiper: swiper_thumb,
        },
    });
}

コードの中で重要な点がこちら↓

メインとサムネイル用のスライダーHTMLを作る
サムネイルスライダー用のJavaScriptを記述
メインスライダー用のJavaScripを記述
CSSを使いサムネイルスライダーを装飾

順に解説してきます。

➀：メインとサムネイル用のスライダーHTMLを作る

まずメイン用のスライダーと、サムネイル用スライダーのHTMLを組みましょう。

下記の感じですね↓

<!-- メイン用スライダー -->
<div class="swiper swiper-main">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide03">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide04">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="">
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<!-- サムネイル用スライダー -->
<div class="swiper swiper-thumb">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide03">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide04">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="">
        </div>
    </div>
</div>

メインの方には「swiper-main」のクラスを、サムネイルの方には「swiper-thumb」のクラスをつけておきました。

またメインのみ矢印をつけておきます。
そして画像数は同じに。

➁：サムネイルスライダー用のJavaScriptを記述

そしたらまず先にサムネイル用スライダーに対して、JavaScripコードを記述しましょう。

window.onload = function() {
    const swiper_thumb = new Swiper(".swiper-thumb", {
        slidesPerView: 4,
    });
}

今回は4枚のサムネを表示するので、「slidesPerView: 4,」を指定しました。

ジト

メインスライダーよりも上に記述するよ！

➂：メインスライダー用のJavaScripを記述

続いてメインスライダー用のJavaScriptコードを記述します。

先述したサムネイル用よりも、下に指定。

window.onload = function() {
    const swiper_thumb = new Swiper(".swiper-thumb", {
        slidesPerView: 4,
    });
    const swiper = new Swiper(".swiper-main", {
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        thumbs: {
            swiper: swiper_thumb,
        },
    });
}

「thumbs」部分にて、連動させるスライダーの変数を指定します。

thumbs: {
    swiper: swiper_thumb,
},

これでサムネイル用スライダーをクリックしたら、メインスライダーも動くように実装できました。

➃：CSSを使いサムネイルスライダーを装飾

あとはサムネイル用スライダーをCSSにて装飾すれば完成です。

今回は例として余白をつけたのと、アクティブでないサムネイルの透過率を変えてみました。

.swiper-thumb {
    margin-top: 5px;
}

.swiper-thumb .swiper-slide {
    opacity: .5;
    transition: opacity .5s ease;
    cursor: pointer;
}

.swiper-thumb .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
}

ここはデザインや仕様に合わせて調整しましょう。

See the Pen swiper　サムネイル付きスライダー by jito-coder (@jito-coder) on CodePen.

これで完成です！