サムネイル連動スライダー

カスタマイズしやすいサムネイル連動スライダーをコピペで簡単実装。
jQueryに依存せず軽量なSwiperを使用することで、どんな環境でもさくさく動きやすい。
cssでのカスタマイズを初心者でも簡単に出来るような構造にしたサムネイル連動スライダー。

HTML

<!--　事前に読み込むもの　-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
  
<div class="ugkThumbsSlider">
  <div class="swiper-area">
    <!-- メイン -->
    <div class="swiper ugkMainSlider">
      <!-- Swiper wrapper -->
      <div class="swiper-wrapper">
      <!-- Slides -->
        <div class="swiper-slide">
          <img src="/animation/wp-content/uploads/2026/01/cat05.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/animation/wp-content/uploads/2026/01/cat04.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/animation/wp-content/uploads/2026/01/cat03.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/animation/wp-content/uploads/2026/01/cat02.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/animation/wp-content/uploads/2026/01/cat01.jpg" alt="">
        </div>
      <!-- /Slides -->
      </div>
      <!-- /Swiper wrapper -->
    </div>

    <!-- 左右矢印ボタンが必要な場合 -->
    <div class="swiper-button-prev">＜</div>
    <div class="swiper-button-next">＞</div>
  </div>
  
  <!-- サムネイル -->
  <div class="swiper ugkSubSlider">
    <!-- Swiper wrapper -->
    <div class="swiper-wrapper">
    <!-- Slides -->
      <div class="swiper-slide">
        <img src="/animation/wp-content/uploads/2026/01/cat05.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/animation/wp-content/uploads/2026/01/cat04.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/animation/wp-content/uploads/2026/01/cat03.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/animation/wp-content/uploads/2026/01/cat02.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="/animation/wp-content/uploads/2026/01/cat01.jpg" alt="">
      </div>
    <!-- /Slides -->
    </div>
    <!-- /Swiper wrapper -->
    
    <!-- スクロールバーが必要な場合 -->
    <div class="swiper-scrollbar"></div>
    <!-- ページネーションが必要な場合 -->
    <!--<div class="swiper-pagination"></div>-->
  </div>
</div>

CSS

.ugkThumbsSlider {
  width: 400px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}
.ugkThumbsSlider .swiper-area {
  position: relative;
}
.ugkThumbsSlider img {
  vertical-align: bottom;
  width: 100%;
  max-width: 100%;
}
.ugkThumbsSlider .swiper-button-next, .ugkThumbsSlider .swiper-button-prev {
  height: 2em;
  width: 2em;
  background-color: #fff;
  color: #333333;
  font-weight: bold;
  border-radius: 100px;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}
.ugkThumbsSlider .swiper-button-next:after, .ugkThumbsSlider .swiper-button-prev:after {
  display: none;
}
.ugkThumbsSlider .swiper-pagination.swiper-pagination-horizontal {
  position: relative;
  bottom: auto;
}
.ugkThumbsSlider .swiper-scrollbar.swiper-scrollbar-horizontal {
  position: relative;
  bottom: auto;
  margin-top: 10px;
}
.ugkThumbsSlider .swiper-pagination-bullet-active {
  background-color: #333333;
}

.ugkSubSlider {
  margin-top: 10px;
}
.ugkSubSlider .swiper-slide-thumb-active {
  opacity: 0.1;
  transition: all ease .3s;
}

JS

document.addEventListener('DOMContentLoaded', () => {
  if (!document.querySelector('.ugkSlider__swiper')) return;

  const fvSwiper = new Swiper('.ugkSlider__swiper', {
    loop: true,
    slidesPerView: 1,//スライド枚数
    spaceBetween: 0,//スライド間の隙間（数字のみ）

    pagination: {//ページネーションが必要な場合
      el: '.ugkSlider .swiper-pagination',
    },

    navigation: {//左右矢印ボタンが必要な場合
      nextEl: '.ugkSlider .swiper-button-next',
      prevEl: '.ugkSlider .swiper-button-prev',
    },

    scrollbar: {//スクロールバーが必要な場合
      el: '.ugkSlider .swiper-scrollbar',
    },
  });
});

実際の動き

＜

＞

みんなにもシェアしてあげて！

この記事を書いた人

IYO

WEBサイトで使える“動くUI”を、コピペで実装可能にし、どこでも誰でも使えるコードに特化して発信しているフロントエンドエンジニア。
中学生で初めてコードに出会い初めてコーディングを知る。
その後、WEB制作会社のフロントエンドエンジニアとしてキャリアをスタートし、フリーランスを経て、現在はWEB制作会社の代表取締役。
コーディングによって人生を創り上げてきたからこそ、コードを通して誰かの役に立てたらという想いで、これまでの知識と経験を総動員したコードを公開中。