WEBサイトで、画像スライダーや投稿記事のスライダーなど1ページに複数のスライダーを配置したい場合が案件ではよくあります。

複数のスライダーを配置することは簡単なのですが、全てのスライダーが一緒の動きでなく、それぞれを個別に動かしたい場合は少しコードを追加する必要があります。

今回は、「1ページに複数のスライダーを設置し、それぞれを個別に動かす方法」について解説していきたいと思います。

画像スライダーを案件でよく使う人は、是非参考にしてみてください。

【Swiper】複数のスライダーが同じ動きをするパターン

サンプルはこちら。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

２つのスライダーのどちらも自動でループするようになっています。

これはJavaScriptで以下のように設定しているからです。

スライダーが2つとも.swiper-containerを持っており、 同じ引数の値なので同じ動きをするのです。

【Swiper】複数のスライダーが個別の動きをするパターン

サンプルはこちら。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

1つ目のスライダーは自動でループし、2つ目は手動でないとループしないようにしました。

先ほどのスライダーと違い、それぞれのスライダーが個別の動きをしています。

スライダーを個別に設定する原理は、まずHTMLに以下のように記述します。

ポイントは、共通クラスであるswiper-containerの同階層に、swiper-container1やswiper-container2といった個別のクラスを追加することです。

クラスは区別が付ければなんでも大丈夫です。

HTMLにクラスを追加出来たら、JavaScriptに以下のようにコードを記述しましょう。

先ほど追加したswiper-container1とswiper-container2を引数にした関数を2つ用意し、それぞれにSwiperのコードを個別に記述してあげればOKです。

これで1ページに複数スライダーを設置しつつ、それぞれを個別に動かすことが出来ました！

まとめ

以上が、「1ページに複数のスライダーを設置し、それぞれを個別に動かす方法」でした。