swiperのスライダーでサムネイル表示させる方法

swiperはスライダーを簡単に作成できるライブラリの一つです。

jQueryに依存せずスライダーを実装することができるのが特徴です。

エフェクトも多くさまざまなスライダーを実装することができます。

swiperでサムネイル表示させる方法

ファイル読み込み

swiperを使うにはまず必要なファイルを読み込む必要があります。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

html

<!-- スライダー-->
<div class="swiper-container slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://placehold.jp/300x300.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/300x300.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/300x300.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/300x300.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/300x300.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/300x300.png" alt=""></div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<!-- サムネイル -->
<div class="swiper-container slider-thumbnail">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://placehold.jp/300x300.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/300x300.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/300x300.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/300x300.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/300x300.png" alt=""></div>
        <div class="swiper-slide"><img src="https://placehold.jp/300x300.png" alt=""></div>
    </div>
</div>

javascript

//サムネイル
var sliderThumbnail = new Swiper('.slider-thumbnail', {
  slidesPerView: 6,
  freeMode: true,
  watchSlidesVisibility: true,
  watchSlidesProgress: true,
});

//スライダー
var slider = new Swiper('.slider', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  thumbs: {
    swiper: sliderThumbnail
  }
});