【Swiper】ThumbsのNavigation(矢印)が連動しない場合の対処法

今回は、最近行った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のカスタマイズの参考にしてみてください。

著者:

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。