【JavaScript】サムネイル付きswiper作成方法

HTML

headの中にswiperファイルを読み込む

<!-- swiperライブラリ -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <!-- //swiperライブラリ -->

bodyタグの中に下記のコードを設置する。CSSはよしなに

<!-- スライドエリア -->
        <div class="swiper-container slider">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <!-- この中にお好きなtagを入れる -->
            </div>
            <div class="swiper-slide">
              <!-- この中にお好きなtagを入れる -->
            </div>
            <div class="swiper-slide">
              <!-- この中にお好きなtagを入れる -->
            </div>
          </div>
        </div>
        <!-- //スライドエリア -->

        <!-- サムネイルエリア -->
        <div class="thumblist">
          <div class="swiper-container thumbnail">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <!-- この中にお好きな画像を設置する -->
              </div>
              <div class="swiper-slide">
                <!-- この中にお好きな画像を設置する -->
              </div>
              <div class="swiper-slide">
                <!-- この中にお好きな画像を設置する -->
              </div>
            </div>
          </div>
        </div>
        <!-- //サムネイルエリア -->

JavaScript

//スライダー
var mainSlider = new Swiper('.slider', {
  loop: true
});

//サムネイル
var Thumbnail = new Swiper('.thumbnail', {
  breakpoints: {
    //SP用
    300: {
      slidesPerView: 4,
      spaceBetween: 5
    },
    //PC用
    500: {
      slidesPerView: 6
    }
  },
  loop: true,
  slideToClickedSlide: true,
});

// スライド遷移時にイベントが発生する slideChange というAPIを使用
// スライダーをスライドした時にサムネイルを移動させる
mainSlider.on('slideChange', () => {
  // realIndex は現在activeになっているスライドの番号が入っている
  Thumbnail.slideToLoop(mainSlider.realIndex);
});
// サムネイルをスライドした時にメインスライドを連動させる(上記と逆)
Thumbnail.on('slideChange', () => {
  mainSlider.slideToLoop(Thumbnail.realIndex);
});