こんにちは、ryohei(@ityryohei)です!

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

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

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

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

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

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

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

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

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

まずは必要な数だけ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で同一ページ内に複数のスライダーを設置する方法のご紹介でした!

JavaScriptを体系的に学びたい方

下記の参考書がおすすめです。私も勉強を始めた際に購入しました。入門書として必要な基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。