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

jqueryでは同一のクラス1つあれば同じページに複数スライダーがあっても指定出来たけど、jQueryを使わない場合でも同じ用に記述をまとめる方法。
Index
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
それぞれ固有の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,
},
まとめ
繰り返し処理を使って、同じオプション設定のスライドを実行させる記述でした。
よかったら参考にしてください。