Swiper Thumbs sample 01

サムネイルのスライダーの動きがおかしい例のサンプル

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;
}

この例では、メインのスライダーのループは有効にして、サムネイルのスライダーのループを無効にしています。

サムネイルとメインのスライダーの両方のループを共に有効にすると、サムネイルで表示するスライド数がスライドの総数の倍数になっていると期待通りの動作になりませんでした。

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>