【Swiper】同一ページ内に複数のスライダーを設置する方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperで同一ページ内に複数のスライダーを設置する方法をご紹介しています。

同一ページ内に複数のスライダーを設置する、特にブログやECサイトを構築する際に求められるケースがあります。

ブログでは関連記事や人気の記事、おすすめの記事など。ECサイトは1画面に多くの情報を詰め込むことが多いため、複数の商品をスライダーに載せてオートプレイで流す方法は常套手段となっています。

ほとんどのスライダー系ライブラリは複数のスライダー表示に対応しています。もちろん「Swiper」も対応しています。

「Swiper」で同一ページ内に複数のスライダーを設置すると下記のような表示になります。

See the Pen Multiple Sliders ina page｜Swiper by ryohei (@intotheprogram) on CodePen.

実際に操作すると、それぞれのスライダーが独立して動いていることがお分かりいただけるかと思います。上記の例ではシンプルなスライダーを使用していますが、それぞれ表示するスライドの枚数を変えたり、エフェクトやスピードなどを設定すると見え方が変わってきますので、応用して色々試していただければと思います。

では、解説していきます。

複数のスライダーを設置する

まずは必要な数だけSwiperのHTMLを記述します。数に指定はありません。必要なだけ設置することができます。

ただ、一つだけ注意点があります。各Swiperの「swiper-container」を持つ要素に、別途ユニークな「id」もしくは「class」を持たせる、という点です。

試しに同一ページ内に3つのSwiperを設置します。それぞれに重複のないクラス名を持たせましょう。具体的には下記のようなイメージです。

<!-- Slider1 -->
<div class="swiper-container slider1">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><h1>Slide 1</h1></div>
        <div class="swiper-slide"><h1>Slide 2</h1></div>
        <div class="swiper-slide"><h1>Slide 3</h1></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
</div>

<!-- Slider2 -->
<div class="swiper-container slider2">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><h1>Slide 1</h1></div>
        <div class="swiper-slide"><h1>Slide 2</h1></div>
        <div class="swiper-slide"><h1>Slide 3</h1></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
</div>

<!-- Slider3 -->
<div class="swiper-container slider3">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><h1>Slide 1</h1></div>
        <div class="swiper-slide"><h1>Slide 2</h1></div>
        <div class="swiper-slide"><h1>Slide 3</h1></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
</div>

Swiperの内容はそれぞれ同じものですが「slider1」、「slider2」、「slider3」と異なる「class」を持たせています。これらを取得してJS側でSwiperを初期化し、スライダーを動かすという流れになります。

HTMLが設置できましたので、続いてスクリプトを作成してSwiperを初期化します。

複数のスライダーが動くスクリプトを作成する

ここまでくれば後は簡単です。いつも使用する要領で「Swiper」を初期化するスクリプトを作成します。ただし、いつもと違う点があります。公式のサンプルでは「Swiper」を「new」でインスタンスにする際に「swiper-container」を引数に指定しているかと思います。しかし、複数のSwiperを設置する場合は、上記で割り振ったユニークな「id」もしくは「class」を指定する必要があります。

具体的には、下記のような指定となります。

//Slider1
var slider1 = new Swiper ('.slider1', {
    effect: 'slide',
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
});

//Slider2
var slider2 = new Swiper ('.slider2', {
    effect: 'fade',
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
});

//Slider3
var slider3 = new Swiper ('.slider3', {
    effect: 'cube',
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
});

以上を記述することで、同一ページ内に複数のスライダーを設置することができます。

ちなみにそれぞれのスライダーが同じ動きで問題ないようであれば、ユニークな名前を割り当てる必要はありません。いつもと同じようにswiper-containerを引数に指定してインスタンスにするだけ実現できます。

複数のスライダーを設置してすべて同じ動きにする

説明だけではわかりにくいので、簡単なサンプルを！

HTML

<!-- Slider1 -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><h1>Slide 1</h1></div>
        <div class="swiper-slide"><h1>Slide 2</h1></div>
        <div class="swiper-slide"><h1>Slide 3</h1></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
</div>

<!-- Slider2 -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><h1>Slide 1</h1></div>
        <div class="swiper-slide"><h1>Slide 2</h1></div>
        <div class="swiper-slide"><h1>Slide 3</h1></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
</div>

...

JS

var swiper = new Swiper ('.swiper-container', {
  //オプション設定
});

以上で同じ動きをする複数のスライダーを設置することができます。

最後に

「Swiper」では単一のスライダーはもちろん、複数のスライダーにも対応した、どんなサイトでも活躍する多機能なスライダーライブラリです。現在は他のスライダーをメインで使用されている方も、ぜひ「Swiper」を触っていただいて、他にはない使い心地に魅了されてくださいね！

以上、Swiperで同一ページ内に複数のスライダーを設置する方法のご紹介でした！