[swiper@8]サムネ付きスライドの作成と注意点

地味なところ。

作例
注意点

作例

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />

<div class="swiper main">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://placehold.jp/1280x1280.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/1280x1280.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/1280x1280.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/1280x1280.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/1280x1280.png" alt=""></div>
    </div>
</div>
<div class="swiper thumb">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://placehold.jp/1280x1280.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/1280x1280.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/1280x1280.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/1280x1280.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/1280x1280.png" alt=""></div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
const swiperthumb = new Swiper('.swiper.thumb');
const swipermain = new Swiper('.swiper.main', {
  thumbs:{
        swiper: swiperthumb,
    },
});
</script>

注意点

ライブラリとjsの記述は設置箇所より下（</body>直前とか）
サムネ用swiperを「thumbs」で指定する
jsはメイン用よりサムネ用の記述を先に書く（そうしないと連動しない）

考え方としてはjsの記述の通りで、使うものを先に完成させておかないと引っ張ってくることができないと覚えておけば混乱はないかと思う。