【Swiper】アクティブサムネイルを中央に固定表示する連動スライダーの作り方【ループ対応】

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperでアクティブサムネイルを中央に固定表示する連動スライダーの作り方をご紹介しています。

下記は本記事でご紹介するスライダーのデモです。サムネイルをクリックするとメインスライドが連動して動きます。もちろんメインスライドの左右にある矢印やフリーモードにも対応しています。

DEMO

See the Pen Swiper Center Thumbnail Slider by ryohei (@intotheprogram) on CodePen.

アクティブのサムネイルを中央に表示する必要がない場合は、下記の記事が参考になるかと思います。

本記事は上記の内容に下記の処理を追加したものです。

ループ対応
アクティブのサムネイルを中央に表示
フリーモードで切り替え可能

完成したときのイメージが近い方の記事を参考にしていただければ幸いです。

では、解説していきます。

Swiperの本体を読み込む

Swiperを使用するには、Swiperの本体ファイルを事前に読み込んでおく必要があります。CDNが用意されていますので、本記事では活用させていただくことにします。CDNはURLを指定するだけで読み込むことができるので楽ですが、URLが変更になったりバージョンが上がってスライダーが動かなくなるなどのリスクがありますので、実際のサイト制作ではダウンロードして使用することをおすすめします。

下記はCDNで読み込む例です。Swiperを使用するファイルに読み込みます。

Swiper CSS

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

Swiper JS

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

以上で準備は完了です。より詳しい内容につきましては、公式サイトをご参照ください。

https://swiperjs.com/get-started/

スライダーを作成する

今回はサムネイル付きのスライダーを作りますので、メイン用とサムネイル用の2つのさうライダーを設置します。下記をそのままコピペされる場合は、画像のURLを差し替えてご利用ください。

HTML

<div class="gallery">                
    <div class="swiper-container gallery-slider">
        <!-- メイン -->
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="sample001.jpg" alt=""></div>
            <div class="swiper-slide"><img src="sample002.jpg" alt=""></div>
            <div class="swiper-slide"><img src="sample003.jpg" alt=""></div>
            <div class="swiper-slide"><img src="sample004.jpg" alt=""></div>
            <div class="swiper-slide"><img src="sample005.jpg" alt=""></div>
            <div class="swiper-slide"><img src="sample006.jpg" alt=""></div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <!-- サムネイル -->
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="sample001.jpg" alt=""></div>
            <div class="swiper-slide"><img src="sample002.jpg" alt=""></div>
            <div class="swiper-slide"><img src="sample003.jpg" alt=""></div>
            <div class="swiper-slide"><img src="sample004.jpg" alt=""></div>
            <div class="swiper-slide"><img src="sample005.jpg" alt=""></div>
            <div class="swiper-slide"><img src="sample006.jpg" alt=""></div>
        </div>
    </div>
</div>

続いてCSSでスタイルを定義します。

下記はデモで使用しているスタイルです。スライドの幅やサムネイルサイズの指定、アクティブ時の透明度の設定くらいで、凝ったことはしていません。参考程度にしていただければと思います。

SCSS

//ギャラリー
.gallery {
    width: 100%;
    max-width: 600px;
    margin: 40px auto;
    
    //メイン
    &-slider {
        width: 100%;
        height: auto;
        margin: 0 0 10px 0;

        .swiper-slide {
            width: auto;
            height: 400px;
            
            img {
                display: block;
                width: auto;
                height: 100%;
                margin: 0 auto;
            }
        }
    }
    
    //サムネイル
    &-thumbs {
        width: 100%;
        padding: 0;
        overflow: hidden;

        .swiper-slide {;
            width: 100px;
            height: 100px;
            text-align: center;
            overflow: hidden;
            
            &-active {
                opacity: 1;
            }
            
            img {
                width: auto;
                height: 100%;
            }
        }
    }
}

以上でスライダーの設置は完了です。後はスクリプトを書いてスライダーを初期化し、動かしていくのですが、Swiperのバージョンによってオプションの指定方法が異なります。

Swiperのバージョンを確認していただいて、それぞれに合ったスクリプトをご利用ください。

Swiper 3系で指定するスクリプト

3系の本体ファイルを読み込んでいる場合に使用するスクリプトです。下記のスクリプトでデモの内容を実装することができます。

JS

//メイン
var slider = new Swiper ('.gallery-slider', {
    slidesPerView: 1,
    centeredSlides: true,
    loop: true,
    loopedSlides: 6, //スライドの枚数と同じ値を指定
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

//サムネイル
var thumbs = new Swiper ('.gallery-thumbs', {
    slidesPerView: 'auto',
    spaceBetween: 10,
    centeredSlides: true,
    loop: true,
    slideToClickedSlide: true,
});

//3系～
//メインとサムネイルを紐づける
slider.params.control = thumbs;
thumbs.params.control = slider;

Swiper 4系以降で指定するスクリプト

4系以降の本体ファイルを読み込んでいる場合に使用する設定です。下記のスクリプトでデモの内容を実装することができます。

//メイン
var slider = new Swiper ('.gallery-slider', {
    slidesPerView: 1,
    centeredSlides: true,
    loop: true,
    loopedSlides: 6, //スライドの枚数と同じ値を指定
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

//サムネイル
var thumbs = new Swiper ('.gallery-thumbs', {
    slidesPerView: 'auto',
    spaceBetween: 10,
    centeredSlides: true,
    loop: true,
    slideToClickedSlide: true,
});

//4系～
//メインとサムネイルを紐づける
slider.controller.control = thumbs;
thumbs.controller.control = slider;

以上でスライダーの作成は完了となります。冒頭でご紹介したデモと同じ、あるいは近いスライダーが表示されるかと思います。