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

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

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

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カスタマイズに役立つ記事まとめ 【コーディング】HTML・CSS・Javascriptサンプルコード記事まとめ【コーディング】HTML・CSS・Javascriptサンプルコード記事まとめ 【HTML、CSS、jQuery】オーバーレイとモーダルをシンプルに作る方法【HTML、CSS、jQuery】オーバーレイとモーダルをシンプルに作る方法