技術Note

今回は、最近行ったSwiperのカスタマイズについてお伝えします。

Swiperには、「Thumbs」という機能があり、2つのスライダーの片方を連動させることができます。

しかし、Thumbに指定したスライダーのNavigation（左右矢印）を押しても、メインのスライダーは動きません。

バグか仕様か分かりませんが、7系から10系までずっとそうなので仕様かもしれません。

そのため、Thumbに指定したSliderのNavigationを押したときに、大本のSliderも動かすように追記する必要があります。

SwiperでThumbsのNavigationを連動させる方法

以下がサンプルコードです。

サンプルページ

let galleryThumbs = new Swiper('.gallery-thumbs', {
    spaceBetween: 10,
    loop:true,
    centeredSlides:true,
    slidesPerView: 3,
    navigation: {
      nextEl: '.gallery-thumbs .swiper-button-next',
      prevEl: '.gallery-thumbs .swiper-button-prev',
    },
  });

  let galleryTop = new Swiper('.gallery', {
    spaceBetween: 10,
    loop:true,
    navigation: {
      nextEl: '.gallery .swiper-button-next',
      prevEl: '.gallery .swiper-button-prev',
    },
    thumbs: {
      swiper: galleryThumbs
    }
  });

  let thumb_button_next = document.querySelectorAll('.gallery-thumbs .swiper-button-next')[0]
  thumb_button_next.addEventListener('click',function (){
    galleryTop.slideNext();
  })

  let thumb_button_prev = document.querySelectorAll('.gallery-thumbs .swiper-button-prev')[0]
  thumb_button_prev.addEventListener('click',function (){
    galleryTop.slidePrev();
  })

ポイントは、以下の部分です。

  let thumb_button_next = document.querySelectorAll('.gallery-thumbs .swiper-button-next')[0]
  thumb_button_next.addEventListener('click',function (){
    galleryTop.slideNext();
  })

  let thumb_button_prev = document.querySelectorAll('.gallery-thumbs .swiper-button-prev')[0]
  thumb_button_prev.addEventListener('click',function (){
    galleryTop.slidePrev();
  })

ここが、ThumbのNavigationを押した時、同時にメインのスライダーも動かす記述になります。

備考

Navigationのクラスや、メインのスライダーを格納している変数（今回であればgalleryTop）の部分を変更して、適宜使ってください。

バージョンについて

また、今回はSwiperのバージョン8系を使用していますが、9系や10系でも動作します。7系でも動くことは確認しました。

8系を使っている理由は9系以降仕様が変わり、カルーセルをループで動かしたときに、スライドの作成が追いついていないことがあるためです。

最新版を使いたいのですがそこが不便でSwiperは8系のまま使っていることが多いです…。

みなさんもSwiperのカスタマイズの参考にしてみてください。