Swiperは簡単にスライダーを作ることが出来るプラグインです。
オプションが豊富に用意されていて設定次第で様々な形のスライダーを実装することが出来ます。
この記事ではSwiperを使ってサムネイルと連動したスライダーを実装する方法をご紹介したいと思います。

完成コード

まずは完成コードを見てみましょう。サクッと実装だけしたいという人はこのコードをコピペして使用してください。

HTMLはこちら。

<div class="swiper swiper-main">
    <div class="swiper-wrapper">
        <div class="swiper-slide -slide1"><img src="https://irodori-design-web.com/blog_image/3269/3269-1.jpg"></div>
        <div class="swiper-slide -slide2"><img src="https://irodori-design-web.com/blog_image/3269/3269-2.jpg"></div>
        <div class="swiper-slide -slide3"><img src="https://irodori-design-web.com/blog_image/3269/3269-3.jpg"></div>
        <div class="swiper-slide -slide4"><img src="https://irodori-design-web.com/blog_image/3269/3269-4.jpg"></div>
        <div class="swiper-slide -slide5"><img src="https://irodori-design-web.com/blog_image/3269/3269-5.jpg"></div>
    </div>
</div>
<div class="swiper swiper-thumbnail">
    <div class="swiper-wrapper">
        <div class="swiper-slide -slide1"><img src="https://irodori-design-web.com/blog_image/3269/3269-1.jpg"></div>
        <div class="swiper-slide -slide2"><img src="https://irodori-design-web.com/blog_image/3269/3269-2.jpg"></div>
        <div class="swiper-slide -slide3"><img src="https://irodori-design-web.com/blog_image/3269/3269-3.jpg"></div>
        <div class="swiper-slide -slide4"><img src="https://irodori-design-web.com/blog_image/3269/3269-4.jpg"></div>
        <div class="swiper-slide -slide5"><img src="https://irodori-design-web.com/blog_image/3269/3269-5.jpg"></div>
    </div>
</div>

CSSはこちら。

*{
    margin: 0;
    padding: 0;
}
.swiper {
    width: 100%;
}
.swiper-main .swiper-slide img {
    display: block;
    width: 100%;
    height: 300px;
    margin-bottom: 10px;
    vertical-align: middle;
    object-fit: cover;
}
.swiper-thumbnail .swiper-slide {
    opacity: .5;
}
.swiper-thumbnail .swiper-slide-thumb-active {
    opacity: 1;
}
.swiper-thumbnail .swiper-slide img {
    width: 100%;
    height: 100px;
    vertical-align: middle;
    object-fit: cover;
}

JavaScriptのコードはこちら。

var swiperThumbnail = new Swiper(".swiper-thumbnail", {
    slidesPerView: 'auto',
    loop: true,
});

var swiperMain = new Swiper('.swiper-main', {
    autoplay: { 
        delay: 5000,
    },
    thumbs: {
        swiper: swiperThumbnail,
    },
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コードの解説

ここからはコードの解説です。

サムネイルが連動したスライダーを作る場合は、メインスライダーとサムネイルスライダーの2つのコードを用意する必要があります。
そしてそれぞれをSwiperでスライダー化します。

まずはサムネイルスライダーの方から。

var swiperThumbnail = new Swiper(".swiper-thumbnail", {
    slidesPerView: 3,
});

slidesPerViewのオプションを指定することでサムネイル画像の表示数を指定します。

続いて、メインスライダーを作っていきます。

thumbs: {
    swiper: swiperThumbnail,
},

このようにメインスライダーの中で、どのスライダーをサムネイルスライダーとして連動させるかを指定します。
この指定をすることでメインスライダーとサムネイルスライダーが連動して動くようになります。

ただし、注意点が一つあります。
それは、先にサムネイルスライダーを記述することです。

var swiperThumbnail = new Swiper(".swiper-thumbnail", { ... });

var swiperMain = new Swiper('.swiper-main', { ... });

この逆でメインスライダーから先に作成してしまうとサムネイルスライダーと連動して動作してくれません。

まとめ

いかがでしたか？
Swiperを使うことで簡単にサムネイル連動スライダーを作ることが出来ました。
オプションを組み合わせることで更に面白いサムネイル連動スライダーを作ることも出来ます。
是非いろいろなオプションを試してオリジナルのスライダーを作ってみて下さい。