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

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

同一ページ内に複数のスライダーを設置する、特にブログやECサイトを構築する際に求められるケースがあります。ブログでは関連記事や人気の記事、おすすめの記事など。ECサイトはビューポート内に多くの情報を詰め込むことが多いため、複数の商品をスライダーに載せてオートプレイで流す方法は常套手段となっています。

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

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

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

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

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

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

まずは設置したいスライダー分だけ、HTMLを記述します。数に指定はありません。必要なだけ設置しましょう!

と意気込みましたが、一点だけ注意していただきたい部分があります。各スライダーの「swiper-container」を持つ要素に、別途ユニークな「id」もしくは「class」を持たせましょう。

例えば下記のサンプルのようなイメージです。

<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>


<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>


<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>

スライダーの内容はそれぞれ同じ記述ですが「slider1」、「slider2」、「slider3」とユニークな「class」を持たせています。これらを取得してスクリプトでスライダーを動かす、という流れになります。

続いてスクリプトを作成してスライダーが動くようにしていきます。

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

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

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

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

    scrollbar: {
      el: '.swiper-scrollbar',
    },
});


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

    scrollbar: {
      el: '.swiper-scrollbar',
    },
});


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

    scrollbar: {
      el: '.swiper-scrollbar',
    },
});

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

ちなみにそれぞれのスライダーが同じ動きで問題ないようであれば、ユニークな名前を割り当てる必要はありません。

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

<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>


<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>

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

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

最後に

いかがでしたでしょうか。

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

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