【Swiper】サムネイルクリックで画像が切り替わるスライダーの作り方

<!-- スライダー -->
<div class="swiper slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="画像パス1" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス2" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス3" alt="" />
    </div>
  </div>
  <!-- 前後の矢印 -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<!-- サムネイル -->
<div class="swiper slider-thumbnail">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="画像パス1" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス2" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス3" alt="" />
    </div>
  </div>
</div>

.slider-thumbnail .swiper-slide {
  opacity: .5;
  transition: opacity .5s;
  width: calc(100% / 3);
}
.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}

// サムネイル
const sliderThumbnail = new Swiper(".slider-thumbnail", {
  slidesPerView: 3, // サムネイルの枚数
});
// スライダー
const slider = new Swiper(".slider", {
  loop: true,
  // 前後の矢印
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  thumbs: {
    swiper: sliderThumbnail,
  },
});