「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', {
オプションが入る
});
次はこの記事!






