Swiperを使ってスライダーを1ページで2つ動かしたい。
このような疑問に答えます。
こんにちは、フリーランスエンジニアの涼です
1つのWebページにスライダーを2つ設置したいって時ありますよね。
ただ、Swiperを使って実装する場合、クラス名に工夫が必要です。今回コードをもとに説明します。
※使用しているSwiperのバージョンは、4.5.0です。
【Swiper】スライダーを1ページで2つ動かす方法
コードのみ載せます。（すみません、デモ画面はありません）
See the Pen
Swiper2つ by masa (@websama)
on CodePen.
ポイントは２つです。
まず、HTMLについてです。slider1とslider2というクラスをそれぞれ追加します。
<div class="swiper-container slider1">
...
<div class="swiper-container slider2">
...
次に、jQueryです。こちらもslider1、slider2というように分けます。
new Swiper('.slider1', {
...
new Swiper('.slider2', {
...
ページネーションの書き方ですが、これは両方とも同じでも動きます。
el: '.swiper-pagination',
...
el: '.swiper-pagination',
...
これで2つのスライダーが両方とも動きます。
