【連動させない！】Swiperを複数設置するテクニック

こんにちは！今回は、Web制作でよく使われる「スライドショー（カルーセル）」を、1ページ内に複数設置する方法をご紹介します。
特に、異なる設定を持つスライドショーを同時に使いたい場合に便利なやり方です！

この記事では、 Swiper.js を使用した具体的なサンプルコードと共に、わかりやすく解説していきます。
HTML、CSS、JavaScriptの基本知識がある方向けの内容となっています。

完成イメージ

1つ目のスライドショーは 3つのスライドを同時に表示し、自動で1.5秒ごとに切り替わる ようになっています。
2つ目のスライドショーは 1つのスライドを表示し、3秒ごとに切り替わる 仕様です。

サンプルコード全体

以下が完成形のコードです。このあと、詳しく解説していきます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamic Swiper Setup</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <style>
      .swiper-container {
        width: 100%;
        height: 300px;
        margin-bottom: 50px;
      }
      .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        background: #ddd;
      }
    </style>
  </head>
  <body>
    <!-- スライダー1: 3スライド表示 -->
    <div class="swiper-container first">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1 - First</div>
        <div class="swiper-slide">Slide 2 - First</div>
        <div class="swiper-slide">Slide 3 - First</div>
        <div class="swiper-slide">Slide 4 - First</div>
        <div class="swiper-slide">Slide 5 - First</div>
        <div class="swiper-slide">Slide 6 - First</div>
      </div>
    </div>

    <!-- スライダー2: 1スライド表示 -->
    <div class="swiper-container second">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1 - Second</div>
        <div class="swiper-slide">Slide 2 - Second</div>
        <div class="swiper-slide">Slide 3 - Second</div>
      </div>
    </div>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
      function setupAllSwipers() {
        const containers = document.querySelectorAll(".swiper-container");

        containers.forEach((container) => {
          let config = null;

          if (container.classList.contains("first")) {
            config = {
              loop: true,
              slidesPerView: 3,
              autoplay: { delay: 1500 },
              spaceBetween: 10,
            };
          }

          if (container.classList.contains("second")) {
            config = {
              loop: true,
              slidesPerView: 1,
              autoplay: { delay: 3000 },
              spaceBetween: 0,
            };
          }

          if (config) {
            new Swiper(container, config);
          }
        });
      }

      setupAllSwipers();
    </script>
  </body>
</html>

コード解説

1. HTMLの構造

まず、2つのスライダーを用意 します。それぞれに「first」「second」というクラスを付けています。このクラスを使って、設定を分けていきます。

<div class="swiper-container first">
  <!-- スライダー1の内容 -->
</div>
<div class="swiper-container second">
  <!-- スライダー2の内容 -->
</div>

2. CSSでデザインを調整

スライダーの大きさや背景色、スライド間の余白をCSSで設定します。

.swiper-container {
  width: 100%;
  height: 300px;
  margin-bottom: 50px;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  background: #ddd;
}

3. JavaScriptで動きを設定

JavaScriptでは、すべてのスライダーを動かすための設定を行います。ポイントは以下の通りです。

document.querySelectorAll を使って、すべてのスライダーを取得します。
各スライダーのクラスに応じて設定（config）を分けます。
クラスが一致する場合のみSwiperを初期化 します。

以下がスクリプトの部分です。

function setupAllSwipers() {
  const containers = document.querySelectorAll(".swiper-container");

  containers.forEach((container) => {
    let config = null;

    if (container.classList.contains("first")) {
      config = {
        loop: true,
        slidesPerView: 3,
        autoplay: { delay: 1500 },
        spaceBetween: 10,
      };
    }

    if (container.classList.contains("second")) {
      config = {
        loop: true,
        slidesPerView: 1,
        autoplay: { delay: 3000 },
        spaceBetween: 0,
      };
    }

    if (config) {
      new Swiper(container, config);
    }
  });
}

setupAllSwipers();