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

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

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

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

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

サンプルはこちら。

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

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

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

var mySwiper = new Swiper('.swiper-container', {
	// スライダーに関する記述が入ります。
});

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

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

サンプルはこちら。

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

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

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

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

<div class="swiper-container swiper-container1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">スライド1</div>
        <div class="swiper-slide">スライド2</div>
        <div class="swiper-slide">スライド3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<div class="swiper-container swiper-container2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">スライド1</div>
        <div class="swiper-slide">スライド2</div>
        <div class="swiper-slide">スライド3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

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

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

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

var mySwiper = new Swiper('.swiper-container1', {
	autoplay: {
		delay: 1000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

var mySwiper = new Swiper('.swiper-container2', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

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

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

まとめ

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