備忘録

【Swiper】スライダーを1ページで2つ動かす方法

Swiperを使ってスライダーを1ページで2つ動かしたい。

このような疑問に答えます。

こんにちは、フリーランスエンジニアの涼です

1つのWebページにスライダーを2つ設置したいって時ありますよね。

ただ、Swiperを使って実装する場合、クラス名に工夫が必要です。今回コードをもとに説明します。

※使用しているSwiperのバージョンは、4.5.0です。

【Swiper】スライダーを1ページで2つ動かす方法

コードのみ載せます。(すみません、デモ画面はありません)

See the Pen
Swiper2つ
by masa (@websama)
on CodePen.

ポイントは2つです。

まず、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つのスライダーが両方とも動きます。

-備忘録

Copyright© Web制作ブログ , 2021 All Rights Reserved Powered by AFFINGER5.