Swiper Thumbs sample 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 -->

この例ではサムネイルのアクティブなスライドは .thumbs-slider .swiper-slide-active で指定します。

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-active img {
  border: 4px solid #F6B5B6;
}
/* アクティブでないサムネイル */
.thumbs-slider .swiper-slide {
  opacity: 0.8;
}
/* アクティブなサムネイル */
.thumbs-slider .swiper-slide-active {
  opacity: 1;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}

この例ではサムネイル及びメインのスライダーを realIndex（ループを考慮した実際のスライドのインデックス）が変わった際に発火されるイベント realIndexChange に登録しています。

realIndex が変わったら slideToLoop() メソッドを使って、渡されたインデックスに一致する realIndex を持つスライドに移行（スライド）します。

そして、サムネイルのスライダーでは任意のスライドをクリックするとそのスライドへ遷移するように slideToClickedSlide に true を指定しています。

また、centeredSlides に true を指定してアクティブなスライドを中央に配置するようにしています。

JavaScript

<script>
  //サムネイルのスライダーの初期化
  let mySwiperThumbs = new Swiper ('.thumbs-slider', {
    loop: true,
    slidesPerView: 4,
    spaceBetween: 10,
    grabCursor: true,
    //アクティブなスライドを中央に配置
    centeredSlides:true,
    //任意のスライドをクリックするとそのスライドへ遷移
    slideToClickedSlide: true,
  });
  
  //メインのスライダーの初期化
  let mySwiperMain = new Swiper ('.main-slider', {
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    //1.3枚分表示
    slidesPerView: 1.3,
    //アクティブなスライドを中央に配置（1.3枚分表示しているので）
    centeredSlides: true,
    spaceBetween: 10,
  });
  
//realIndex が変わった際に発火されるイベントに登録  
mySwiperMain.on('realIndexChange', () => {
  // realIndex はループを考慮したアクティブなスライドの番号が入っている
  mySwiperThumbs.slideToLoop(mySwiperMain.realIndex);
});

mySwiperThumbs.on('realIndexChange', () => {
  mySwiperMain.slideToLoop(mySwiperThumbs.realIndex);
});
</script>