Swiperでクリック式の複数行サムネイル型スライダーを作る【コピペOK】

<!-- メイン -->
<div class="swiper-container">
 <div class="swiper-wrapper">
  <div class="swiper-slide one"></div>
  <div class="swiper-slide two"></div>
  <div class="swiper-slide three"></div>
  <div class="swiper-slide four"></div>
  <div class="swiper-slide five"></div>
  <div class="swiper-slide six"></div>
 </div>
 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>
</div>

<!--— サムネイル ---->
<ul class="thumb-list">
 <li class="thumb-item"><a class="thumb-link one" href="javascript:void(0);" onclick="slideThumb(1)"></a></li>
 <li class="thumb-item"><a class="thumb-link two" href="javascript:void(0);" onclick="slideThumb(2)"></a></li>
 <li class="thumb-item"><a class="thumb-link three" href="javascript:void(0);" onclick="slideThumb(3)"></a></li>
 <li class="thumb-item"><a class="thumb-link four" href="javascript:void(0);" onclick="slideThumb(4)"></a></li>
 <li class="thumb-item"><a class="thumb-link five" href="javascript:void(0);" onclick="slideThumb(5)"></a></li>
 <li class="thumb-item"><a class="thumb-link six" href="javascript:void(0);" onclick="slideThumb(6)"></a></li>
</ul>

.swiper-container {
 width: 100%;
 height: 100px;
}

.thumb-list {
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

.thumb-item {
 list-style: none;
 width: 33%;
}

.thumb-link {
 display: block;
 width: 100%;
 height: 50px;
}


/* わかりやすく色分けしているだけ */
.one { background: yellow; }
.two { background: pink; }
.three { background: orange; }
.four { background: yellowgreen; }
.five { background: skyblue; }
.six { background: blue; }

// swiperを生成
var swiperMain = new Swiper('.swiper-container', {
  speed: 600,
  loop: true,
  navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
 },
});

// slideToメソッドを実行する関数を定義
function slideThumb(index) {
 swiperMain.slideTo(index);
}

function slideThumb(index) {
 swiperMain.slideTo(index);
}