<div class="container js-swiper">
  <div class="swiper js-swiper-main">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <div class="swiper js-swiper-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
    </div>
  </div>
</div>
<!-- container -->

<div class="container js-swiper">
  <div class="swiper js-swiper-main">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <div class="swiper js-swiper-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
    </div>
  </div>
</div>
<!-- container -->

<div class="container js-swiper">
  <div class="swiper js-swiper-main">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <div class="swiper js-swiper-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
    </div>
  </div>
</div>
<!-- container -->

img{
  width: 100%;
  height: auto;
}
.container{
  margin: 0 0 20px;
}
/* 選択されているサムネイルを透過 */
.swiper-slide-thumb-active{
  opacity: .6;
}

//要素を全て取得
const sliders = document.querySelectorAll('.js-swiper');

//繰り返し処理
sliders.forEach((slider) => {
  //要素を取得
  const thumbs = slider.querySelector('.js-swiper-thumbs'),
  main = slider.querySelector('.js-swiper-main');
  
  //サムネイルスライダー
  const swiperThumbs = new Swiper(thumbs, {
    loop: true,
    spaceBetween: 2,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesProgress: true,
  });
  
  //メインイルスライダー
  const swiperMain = new Swiper(main, {
    loop: true,
    spaceBetween: 10,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    thumbs: {
      swiper: swiperThumbs,
    },
  });
});