【Swiper.js】１つのページに複数のスライドショーを設置する方法

SHARE

「Swiper.js」で作るスライドショーを１つのページに複数設置する方法をご紹介。

やり方は非常にシンプル。

swiper-containerにスライドごとで別のclassもしくはidをつけて、その要素を指定してjsで読み込むだけ！

だから、HTMLはこんな感じ。

swiper複数設置
<div id="Slide01" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  </div>
</div>
<div id="Slide02" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  </div>
</div>

それぞれidをつけますね。

そんでJavascriptはこんな感じ。

JS
var swiper01 = new Swiper('#Slide01', {
  オプションが入る
});

var swiper02 = new Swiper('#Slide02', {
  オプションが入る
});

次はこの記事！

Swiper.jsカスタマイズに役立つ記事まとめ

前の記事

【Swiper.js】クリックした要素の番号のスライドを表示す…

次の記事

【Swiper.js】スライドの高さを揃える方法