MENU

【JavaScript】「swiper.js」で同じオプションのスライダーを1ページ内に複数設置する方法

jqueryでは同一のクラス１つあれば同じページに複数スライダーがあっても指定出来たけど、jQueryを使わない場合でも同じ用に記述をまとめる方法。

swiper導入方法

導入方法はこちらで説明。

【JavaScript】Vanilla JSで書かれたレスポンシブスライダー「swiper.js」
jQueryに依存しないスライダープラグイン「swiper.js」をご紹介。swiper.jsとはレスポンシブ対応のスライダープラグインです。jQuery全盛期の時は「Nivo Slider」とか「Flex slider」や、今でも「bxSlider」、「slick」などがありますが、個人的にはswiperの一択というくらい便利で色々出来ます。現在のリリースされている最新バージョンは5.4.1。※2020年5月時点。特徴 jQuery不要で美しいモバイルメニューが実装可能 Mutation observer フレックスボックスのレイアウト 右から左に書く言語対応(RTLサポート) 複数の行のスライド...
何もないけどヨロシク。
 

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

公式サイトで解説されているオプション設定。

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

それぞれ固有のIDもしくはクラスでそれぞれ指定する必要がある。

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

同じオプション内容のjavascriptをまとめる

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

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>

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,
},

まとめ

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

関連記事