Swiper Thumbs sample 01-2

HTML

<!-- メインのスライダー-->
<div class="swiper 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.main-slider -->
  
<!-- サムネイルのスライダー-->
<div class="swiper 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.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;
}

この例では、メインのスライダーの初期化で centeredSlides: true と slidesPerView: 1.3 を指定して 1.3枚分表示してアクティブなスライドを中央に表示しています。

両方のスライダーに loop: true を指定してループを有効にしていますが、何故か slidesPerView を4にして、メインのスライドのナビゲーションを使って5枚目を表示する際にサムネイルのスライダーがうまく連動しません（サムネイルのスライダーの loop を無効にすれば問題ありません）。

slidesPerView を 5（4以外）にするか、表示するスライドの数を9（4の倍数以外）にすると期待通りの動作になったので、こちらの例では slidesPerView: 5 としています。

両方のスライダーのループを有効にした場合、スライドの総数がサムネイルで表示するスライド数の倍数になっていると期待通りの動作にならないようです。

また、どのタイミングで発生するかは不明ですが、サムネイル画像をクリックした場合にメインのスライドの左右のどちらかの画像が表示されないことがあるため loopedSlides: 8 を指定しています（これが正しい方法かどうかは不明）。メインのスライダーの左右に前後のスライドの一部を表示しない（複数表示しない）のであれば不要かと思います。

JavaScript

<script>
  //サムネイルのスライダーの初期化
  let mySwiperThumbs = new Swiper ('.thumbs-slider', {
    loop: true,
    slidesPerView: 5,
    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
    },
    //1.3枚分表示
    slidesPerView: 1.3,
    //アクティブなスライドを中央に配置
    centeredSlides: true,
    spaceBetween: 10,
    //追加で指定
    loopedSlides: 8,
  });
</script>