こんにちは、ryohei(@ityryohei)です!

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

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

DEMO

See the Pen
PowvWeX
by ryohei (@intotheprogram)
on CodePen.

本サイトでは、下記の記事で似たようなスライダーの作り方をご紹介しています。

本記事では下記の内容を追加したも内容となります。

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

実装を検討しているスライダーと比較して、完成イメージが近い方のの記事を参考にしていただければと思います!

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

Swiperの本体を読み込む

Swiperを使用するには、SwiperのCSSとJSをHTMLファイルに読み込んでおく必要があります。SwiperはCDNあ用意されています。URLを指定するだけで読み込むことができますので、ありがたく使わせていただきましょう。

下記のタグをSwiperを使用するHTMLファイルに記述します。

Swiper CSS

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

Swiper JS

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

以上で準備は完了です。

※より詳しい内容につきましては、下記の公式サイトをご参照ください。
https://swiperjs.com/get-started/

スライダーを作成する

今回はサムネイル付きのスライダーを作りますので、メイン用とサムネイル用の二つのスライドを設置します。確認用に下記のHTMLをそのままご利用ください。

HTML

<div class="gallery">
    <div class="swiper-container gallery-slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="https://i.picsum.photos/id/102/500/500.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://i.picsum.photos/id/1022/500/500.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://i.picsum.photos/id/1043/500/500.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://i.picsum.photos/id/1041/500/500.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://i.picsum.photos/id/1049/500/500.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="https://i.picsum.photos/id/102/500/500.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://i.picsum.photos/id/1022/500/500.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://i.picsum.photos/id/1043/500/500.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://i.picsum.photos/id/1041/500/500.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://i.picsum.photos/id/1049/500/500.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 3系で指定するスクリプト

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

JS

//メイン
var gallerySlider = new Swiper ('.gallery-slider', {
    slidesPerView: 1,
    centeredSlides: true,
    loop: true,
    loopedSlides: 5,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
});

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

gallerySlider.params.control = galleryThumbs;
galleryThumbs.params.control = gallerySlider;

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

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

//メイン
var gallerySlider = new Swiper ('.gallery-slider', {
    slidesPerView: 1,
    centeredSlides: true,
    loop: true,
    loopedSlides: 5,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

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

gallerySlider.controller.control = galleryThumbs;
galleryThumbs.controller.control = gallerySlider;

以上でスライダーの作成は完了となります。

最後に

Swiperは業務でもプライベートでも頻繁に使わせていただいているスライダーで、ソース自体は完成してるけど紹介できていないスライダーがまだまだあります。
今後、本サイトを訪れてくれた皆様にそのようなスライダーも共有できればと思いますので、時間は掛かるかもしれないですが、気長にお待ちいただければと幸いです。

以上、Swiperでアクティブサムネイルを中央に固定表示する連動スライダーの作り方のご紹介でした!