フリーランスの忘備録

Dark Mode

searchKeywords

sellBlog Taglist

boltおすすめ記事

Swiperでサムネイル付きのスライダーを作成する(v7 対応版)

Swiperでサムネイル付きのスライダーを作成する(v7 対応版)

以前、Swiperでサムネイル付きのスライダーを作成するという記事を紹介しましたが、Swiperもアップデートされており、この記事の公開時点でv7.0.6になっています。

そこで今回はv7.0.6を使って、Swiperでサムネイル付きのスライダーを作成したので、新しくSwiperを使って導入する場合はこちらを参考にしてみてください。

目次

  1. 制作物例
  2. javascript

制作物例

下記が実際に制作してみたものです。

See the Pen swiper with thumbnail by takblog (@blanks-site) on CodePen.

javascript

下記がjavascriptのコードです。

htmlやcssについてはcodepenから確認してください。

コードをクリップボードにコピー
(function(){
  const mainSlides = document.querySelectorAll('.main-swiper .swiper-slide');
  const thumbSlides = document.querySelectorAll('.thumb-swiper .swiper-slide');
  const mainSwiper = new Swiper('.main-swiper',{ 
    loop:true,
    loopedSlides:mainSlides.length,
    effect:'fade',    
    fadeEffect:{
      crossFade:true
    }
  });
  const thumbSwiper = new Swiper('.thumb-swiper',{ 
    slidesPerView:'auto',
    spaceBetween:20,
    centeredSlides:true,
    loop:true,
    loopedSlides:thumbSlides.length,
    slideToClickedSlide:true,
    controller:{
      control: mainSwiper
    }
  });
  mainSwiper.on('slideChangeTransitionEnd',()=>{
    const mainModulo = mainSwiper.activeIndex%mainSlides.length;
    const thumbModulo = thumbSwiper.activeIndex%thumbSlides.length;
    if( mainModulo != thumbModulo){
      thumbSwiper.slideToLoop(mainModulo);
    }
  });
})();

コードをポップアップで見る

下記からコードの簡単な説明していきます。「コードをポップアップで見る」を見ながら読んでください。

2、3行目は2つのswiperのスライドを取得しています。
swiperは「loop:true」と「slidesPerView: 'auto'」を使う時は、loopedSlidesのオプションでslideの数を設定する必要があります。ただ「loop:true」した時には、loopedSlidesオプションを合わせて設定したほうが無難なので、いつも設定しています。
そのためloopedSlidesオプションを「mainSlides.length」「thumbSlides.length」で設定しています。

4〜11行目はメインのスライダーの設定になりますが、サムネイル付きのスライダーを制作するのにあたって特別なポイントはありませんが、effectはfadeのほうがおすすめです。effectがsliderのままだと、1つ先のスライドに遷移したときなど動きが早くなりすぎます。

12〜22行目はサムネイルのスライダーの設定になります。
ポイントは「slideToClickedSlide:true」と「controllerオプション」になります。

slideToClickedSlideはクリックしたスライドをアクティブにするオプションです。デフォルトではfalseなので、trueにします。

controllerオプションが2つのスライダーを同期させるオプションです。

23〜29行目はメインのスライダーをマウスなどでスライドが変更されたときにサムネイルのスライダーも変更する処理です。

controllerオプションは「サムネイルスライダーが切り替え」→「メインスライダーが切り替え」は制御できますが、「メインスライダーが切り替え」→「サムネイルスライダーが切り替え」は制御できません。

そこで別の処理を書いてあげます。

swiper.activeIndexは現在アクティブなスライド番号を取得します。
メイン・サムネイルスライダーどちらもloop:trueしているため、メイン・サムネイルスライダーが同じスライドを表示していても、同じswiper.activeIndexを返すとは限りません。
ですのでswiper.activeIndexをメイン・サムネイルスライダーどちらもスライド枚数で割って、余りの数で比較しています。

27行目は「mainModulo」「thumbModulo」が異なる場合に、サムネイルスライダーをメインスライダーと同じスライドに切り替えています。

loop:true;なので、slideToLoop()を利用しています。loop:false;ならslideTo()を利用するので、注意してください。

Swiperが結構アップデートされていたので、新しく記事を書き直してみたら、結構変わっている箇所があったので、Swiperのバージョンには気をつけて使用したほうがよさそうですね。

arrow_circle_up