【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

【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;

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

最後に

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

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

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍