Swiperの設定でスライド枚数が何枚でも動作するようにする方法

JavaScriptのスライダーライブラリ「Swiper」を使ってサイトのスライダーを実装する際、「スライド枚数が少なくても多くても、問題なく動作してほしい」という要求はよくあります。

本記事では、Swiperでスライド枚数によらず動作する設定方法をサンプルコード付きで解説します。

【サンプルHTML】

<!-- メインスライダー -->
<div class="swiper main-img-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <!-- ... 任意の枚数切り替え -->
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<!-- サムネイルスライダー -->
<div class="swiper hall-slider-thumbnail">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Thumb 1</div>
    <div class="swiper-slide">Thumb 2</div>
    <div class="swiper-slide">Thumb 3</div>
  </div>
</div>

【サンプルJavaScript】

// スライド枚数を取得
const totalSlides = document.querySelectorAll('.main-img-slider .swiper-slide').length;

// サムネイル
const thumbs = new Swiper('.hall-slider-thumbnail', {
  centeredSlides: true,
  spaceBetween: 10,
  loop: true,
  watchOverflow: true,
  slidesPerView: 'auto',
  touchRatio: 0.2,
  slideToClickedSlide: true
});

// メイン
const slider = new Swiper('.main-img-slider', {
  slidesPerView: 1.7,
  loop: true,
  loopedSlides: totalSlides, // 枚数によって自動設定
  centeredSlides: true,
  watchOverflow: true,
  autoplay: {
    delay: 5000,
    disableOnInteraction: true
  },
  effect: 'coverflow',
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  breakpoints: {
    600: {
      slidesPerView: 1
    }
  },
  controller: {
    control: thumbs
  }
});

// 連動設定
thumbs.controller.control = slider;

【ポイント】

• loopedSlides を加えることで loop: true を使っても安心
• document.querySelectorAll(...).length で自動設定
• Swiper v6以降は navigation や controller.control を使おう

【おわりに】

Swiperは高機能ですが、少しの設定ミスで動作に違いが出ることもあります。
この設定を使えば、任意のスライド枚数にも対応でき、ループやサムネイル連動も効果的に実現できます。