MENU

【JavaScript】「swiper.js」でスライダーを1ページ内に複数設置する方法

swiper.jsは、スワイプジェスチャーにも対応しカスタマイズオプションも豊富なスライダープラグインです。ここではswiper.jsを使ったスライダーを同一ページに複数設置する方法を説明します。

この記事を読んでる人におすすめの書籍

JavaScript逆引きレシピ 第2版 [ 山田 祥寛 ]
created by Rinker
¥3,080 (2023/06/02 14:29:41時点 楽天市場調べ-詳細)

swiper導入方法

導入方法はこちらで説明しているので導入方法が分からない人はこちら。

【JavaScript】Vanilla JSで書かれたレスポンシブスライダー「swiper.js」
swiper.jsは、スワイプにも対応したカスタマイズオプションが豊富なスライダープラグインです。数多くのサイトがswiper.jsを使っているかと思います。ここではスライダープラグイン「swiper.js」の設置方法と基本のオプションをいくつかご紹介します。swiper.jsとはレスポンシブ対応のスライダープラグインです。jQuery全盛期の時は「Nivo Slider」とか「Flex slider」や、今でも「bxSlider」、「slick」などがありますが、個人的にはswiperの一択というくらい便利で色々出来ます。現在のリリースされている最新バージョンは8.4.5。※20...
何もないけどヨロシク。
 

複数設置のオプション設定

公式サイトで解説されているオプション設定。
例えば、同一ページ内に3つのSwiperを設置する際、それぞれに重複のないユニークな「id」または「class」名を持たせないといけなく、以下の例では「js-swiper◯」の◯に番号を割り付けました。

HTML

<!-- Swiper -->
<div class="swiper-container js-swiper1">
  <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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination js-swiper-pagination1"></div>
</div>
<!-- Swiper -->
<div class="swiper-container js-swiper2">
  <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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination js-swiper-pagination2"></div>
</div>
<!-- Swiper -->
<div class="swiper-container js-swiper3">
  <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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination js-swiper-pagination3"></div>
</div>

JS

スクリプト側ではhtmlに指定したIDもしくはclass名をそれぞれ指定する必要があります。以下では3つそれぞれのオプション値が異なるため個別に記述する必要があります。次の項では全く同じオプション値の場合、省略して記述することができるのでその方法を説明します。といってもとても簡単です。

<script>
  var swiper1 = new Swiper('.js-swiper1', {
    spaceBetween: 30,
    pagination: {
      el: '.js-swiper-pagination1',
      clickable: true,
    },
  });
  var swiper2 = new Swiper('.js-swiper2', {
    spaceBetween: 40,
    effect: 'cube',
    pagination: {
      el: '.js-swiper-pagination2',
      clickable: false,
    },
  });
  var swiper3 = new Swiper('.js-swiper3', {
    spaceBetween: 50,
    direction: "vertical",
    pagination: {
      el: '.js-swiper-pagination3',
      clickable: true,
    },
  });
</script>

同じオプション値のスライダーを複数設置する – 更新

上記の方法では、それぞれ別のオプション設定の時は問題ないけど、全く同じオプションの場合、同じ記述が増えてあまりきれいじゃないのでまとめる方法を紹介します。

HTML

<!-- Swiper -->
<div class="swiper-container js-swiper">
  <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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination js-swiper-pagination"></div>
</div>
<!-- Swiper -->
<div class="swiper-container js-swiper">
  <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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination js-swiper-pagination"></div>
</div>
<!-- Swiper -->
<div class="swiper-container js-swiper">
  <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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination js-swiper-pagination"></div>
</div>

2023.01.14更新

JS(新バージョン)

前はこの記述方法だとスライダーのページネーションをクリックすると、同一ページに設置したすべてのスライダーが連動してスライドしてしまいました。なので「JS(旧バージョン)」ではスクリプト側で連番を割り当てる工夫をしてました。気がついたらswiper側でアップデートされて対応されていたようです。

<script>
  var swiper = new Swiper('.js-swiper', {
    spaceBetween: 30,
    pagination: {
      el: '.js-swiper-pagination',
      clickable: true,
    },
  });
</script>

ここから古い内容です。自身の備忘録のため残しておきます。

JS(旧バージョン)

<script>
  var elmSwiper = document.querySelectorAll('.js-swiper');
  var elmPager = document.querySelectorAll('.js-swiper-pagination');
  if(elmSwiper.length > 0){
    for (let i = 0; i < elmSwiper.length; i++) {
      elmSwiper[i].className += i;
      elmPager[i].className += i;
      var swiper = new Swiper('.js-swiper' + i, {
        spaceBetween: 30,
        pagination: {
          el: '.js-swiper-pagination' + i,
          clickable: true,
        },
      });
    }
  }
</script>

スライダーとページャーの変数を宣言。

var elmSwiper = document.querySelectorAll('.js-swiper');
var elmPager = document.querySelectorAll('.js-swiper-pagination');

スライダー「elmSwiper」の数だけ繰り返し処理。

if(elmSwiper.length > 0){
  for (let i = 0; i < elmSwiper.length; i++) {
  ...
  }
}

スライダーとページャーのクラス名の語尾に繰り返し処理分の数値を追加

elmSwiper[i].className += i;
elmPager[i].className += i;

実行するスライダーのクラス「.js-swiper」の語尾にも繰り返し処理分の数値が追加

var swiper = new Swiper('.js-swiper' + i, {
  ...
});

実行するページャーのクラス「.js-swiper-pagination」の語尾にも繰り返し処理分の数値が追加

pagination: {
  el: '.js-swiper-pagination' + i,
  clickable: true,
},

まとめ

繰り返し処理を使って、同じオプション設定のスライドを実行させる記述でした。
よかったら参考にしてください。

2023.01.14更新

ちなみに自分は旧バージョンの実装方法を書いたとき、以下の書籍を読みました。
Javascriptの基本から応用までが辞書のように機能ごとに書かれていて、今でも手元に忘れたときなどにパラパラと調べるようで使ってます。難しいことは書いてないのでコーディングを行うWebデザイナーは必須のオススメ書籍です。

Webデザイナーでも持っておいて損はないおすすめの書籍

JavaScript逆引きレシピ 第2版 [ 山田 祥寛 ]
created by Rinker
¥3,080 (2023/06/02 14:29:41時点 楽天市場調べ-詳細)

nanimonai

プログラム書く方が楽しいデザイナーです。デザイン事務所→フリーランス→スタートアップ入社→フリーランス(現在)。 全然更新しないのでブログは向いてないと思いつつなんとかやってます。 よければTwitterのフォローもお願いします。

カテゴリー

キーワード

css Excel Figma Figma Basic Github Google Apps Script html javascript Mac Photoshop php RICOH THETA Sass STUDIO STUDIO Tips UI・UX Vue WordPress スプレッドシート 正規表現

デザインに必須のフリー素材サイト

関連記事