【Swiper】1ページに複数のスライダーを設置し、それぞれを個別に動かす方法

WEBサイトで、画像スライダーや投稿記事のスライダーなど1ページに複数のスライダーを配置したい場合が案件ではよくあります。
複数のスライダーを配置することは簡単なのですが、全てのスライダーが一緒の動きでなく、それぞれを個別に動かしたい場合は少しコードを追加する必要があります。
今回は、「1ページに複数のスライダーを設置し、それぞれを個別に動かす方法」について解説していきたいと思います。
画像スライダーを案件でよく使う人は、是非参考にしてみてください。
【Swiper】複数のスライダーが同じ動きをするパターン
サンプルはこちら。
See the Pen
Untitled by webis (@webis-co)
on CodePen.
2つのスライダーのどちらも自動でループするようになっています。
これはJavaScriptで以下のように設定しているからです。
1 2 3 |
var mySwiper = new Swiper('.swiper-container', { // スライダーに関する記述が入ります。 }); |
スライダーが2つとも.swiper-containerを持っており、 同じ引数の値なので同じ動きをするのです。
【Swiper】複数のスライダーが個別の動きをするパターン
サンプルはこちら。
See the Pen
Untitled by webis (@webis-co)
on CodePen.
1つ目のスライダーは自動でループし、2つ目は手動でないとループしないようにしました。
先ほどのスライダーと違い、それぞれのスライダーが個別の動きをしています。
スライダーを個別に設定する原理は、まずHTMLに以下のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="swiper-container swiper-container1"> <div class="swiper-wrapper"> <div class="swiper-slide">スライド1</div> <div class="swiper-slide">スライド2</div> <div class="swiper-slide">スライド3</div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <div class="swiper-container swiper-container2"> <div class="swiper-wrapper"> <div class="swiper-slide">スライド1</div> <div class="swiper-slide">スライド2</div> <div class="swiper-slide">スライド3</div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> |
ポイントは、共通クラスであるswiper-containerの同階層に、swiper-container1やswiper-container2といった個別のクラスを追加することです。
クラスは区別が付ければなんでも大丈夫です。
HTMLにクラスを追加出来たら、JavaScriptに以下のようにコードを記述しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var mySwiper = new Swiper('.swiper-container1', { autoplay: { delay: 1000, stopOnLastSlide: false, disableOnInteraction: false, reverseDirection: false }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, pagination: { el: '.swiper-pagination', type: 'bullets', clickable: true } }); var mySwiper = new Swiper('.swiper-container2', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, pagination: { el: '.swiper-pagination', type: 'bullets', clickable: true } }); |
先ほど追加したswiper-container1とswiper-container2を引数にした関数を2つ用意し、それぞれにSwiperのコードを個別に記述してあげればOKです。
これで1ページに複数スライダーを設置しつつ、それぞれを個別に動かすことが出来ました!
まとめ
以上が、「1ページに複数のスライダーを設置し、それぞれを個別に動かす方法」でした。