Swiper Thumbs sample （サムネイルの動きがおかしい例）

メインのスライダーのナビゲーションをクリックしていき、5枚目に移る際、サムネイルのスライダーが連動せずに、6枚目に移行する際に連動してしまう例です。

この現象が発生するのは、スライドの総数（この例では 8）がサムネイルで表示するスライド数（この例では 4）の倍数になっていて、両方のスライダーの設定でループを有効にしている場合です。

HTML

<!-- メインのスライダー-->
<div class="swiper-container main-slider">
  <div class="swiper-wrapper"> 
    <div class="swiper-slide">
      <img src="images/swiper_img_01.jpg" alt="" /> 
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_02.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_03.jpg" alt="" /> 
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_04x.jpg" alt="" /> 
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_05.jpg" alt="" /> 
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_06.jpg" alt="" />  
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_07.jpg" alt="" /> 
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_08.jpg" alt="" /> 
    </div> 
  </div>
  <!-- end of .swiper-wrapper -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<!-- end of .swiper-container.main-slider -->
  
<!-- サムネイルのスライダー-->
<div class="swiper-container thumbs-slider">
  <div class="swiper-wrapper"> 
    <div class="swiper-slide">
      <img src="images/swiper_img_01.jpg" alt="" /> 
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_02.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_03.jpg" alt="" /> 
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_04x.jpg" alt="" /> 
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_05.jpg" alt="" /> 
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_06.jpg" alt="" />  
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_07.jpg" alt="" /> 
    </div>
    <div class="swiper-slide">
      <img src="images/swiper_img_08.jpg" alt="" /> 
    </div> 
  </div>
  <!-- end of .swiper-wrapper -->
</div>
<!-- end of .swiper-container.thumbs-slider -->

CSS

* {
  box-sizing: border-box;
}
.swiper-slide img {
  max-width: 100%;
}
/* メインのスライダーのアクティブでないものは不透明度を 0.6 に */
.swiper-slide {
  opacity: 0.6;
}
/* メインのスライダーでアクティブなもの（現在表示されている）は不透明度を 1 に */
.swiper-slide.swiper-slide-active {
  opacity: 1;
}
/* サムネイルでアクティブなものには枠線を表示 */
.thumbs-slider .swiper-slide-thumb-active img {
  border: 4px solid #F6B5B6;
}
/* アクティブでないサムネイル */
.thumbs-slider .swiper-slide {
  opacity: 0.8;
}
/* アクティブなサムネイル */
.thumbs-slider .swiper-slide-thumb-active {
  opacity: 1;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}

この例では、メインとサムネイルのスライダーのループが両方とも有効になっています。サムネイルのスライダーのループを無効にすれば期待通りの動きになります（Sample 01）。

JavaScript

<script>
  //サムネイルのスライダーの初期化
  let mySwiperThumbs = new Swiper ('.thumbs-slider', {
    loop: true, //ループを有効に
    slidesPerView: 4,
    spaceBetween: 10,
    //各スライドの進行状況を監視
    watchSlidesProgress: true,
    //ビューポートにあるスライドに表示クラスを追加
    watchSlidesVisibility: true,
    //カーソルをデフォルトから grab に変更
    grabCursor: true,
  });
  
  //メインのスライダーの初期化
  let mySwiperMain = new Swiper ('.main-slider', {
    loop: true, //ループを有効に
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    thumbs: {
      //サムネイルのスライダーを指定
      swiper: mySwiperThumbs
    },
  });
</script>