Swiper.js（v11）で複数のスライダーを設置する方法を解説

プログラミング・コーディング

image

人気のJavaScriptスライダープラグインであるSwiperで、同じ設定のスライダーを複数設置する方法をご紹介します。

基本の導入方法

SwiperプラグインのCSSとJSを追加（CDN）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

Swiper本体のHTMLとJS設定

<!-- メインコンテナ -->
<div class="swiper">
	<!-- スライドのラッパー -->
	<div class="swiper-wrapper">
		<!-- スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
	</div>
	<!-- ページネーション -->
	<div class="swiper-pagination"></div>
	<!-- ナビゲーション -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>
.swiper-slide {
	padding-block: 30px;
	background: #ccc;
	text-align: center;
}

//swiperのメインコンテナのクラスを指定
const swiper = new Swiper(".swiper", {
	// オプション
	loop: true,
	slidesPerView: 1,
	spaceBetween: 20,

	//ページネーションのクラスを指定
	pagination: {
		el: ".swiper-pagination"
	},

	// ナビゲーションのクラスを指定
	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev"
	}
});

Swiperの構造ルール

各スライドの親コンテナ.swiper-wrapperはメインコンテナ.swiperの直下にある必要がある

※メインコンテナのクラス名は変更可能

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

今回は以下の２つ方法で紹介します。

  1. １つのインスタンスで複数のスライダーを作る
  2. forEachを使って、インスタンスをスライダーごとに分ける

方法1. 1つのインスタンスで複数のスライダーを作る

こちらの方法が一番シンプルに実装できますが、以下の構造ルールを押さえとく必要があります。

オプションパーツの.swiper-pagination,.swiper-button-nextなどはメインコンテナ.swiper内に配置する（直下でなくても良い）

※クラス名は適宜変更可能

サンプル

<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">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">
	<div class="swiper-wrapper">
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">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">
	<div class="swiper-wrapper">
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
	</div>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>
.swiper {
	margin-block: 30px;
}
.swiper-slide {
	padding-block: 40px;
	background: #ccc;
	text-align: center;
}

const swiper = new Swiper(".swiper", {
	loop: true,
	spaceBetween: 20,

	pagination: {
		el: ".swiper-pagination"
	},

	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev"
	}
});

上記のルールを守れば、Swiper本体のHTMLをそのまま複数並べるだけで実現可能です。

オプションパーツの方は割と自由が効くので、CSSを上手く使えば、ある程度のデザインまではこの構造を維持したままの設置が可能だと思います。

デメリットとしては、デザインによっては絶対配置を多用したりと、CSSが冗長になりやすいことです。

方法2. forEachを使って、インスタンスをスライダーごとに分ける

デザインによってはオプションパーツがメインコンテナ外にあった方が都合が良い場合もあるでしょう。

そんな時はスライダーごとに設定を分ける必要がありますが、今回は同仕様で全て同じ設定を想定しているので、forEachとdata属性を使ってJavaScriptを設定していきましょう。

サンプル

See the Pen 【TRTBLOG】Swiper v11 multiple out button by osbtk (@osbtk) on CodePen.

各スライダーごとにスライダーとオプションパーツと紐づけるdata属性を設定する必要がありますが、後々機能を追加したり、カスタマイズが必要な際も対応がしやすいでしょう。

まとめ

Swiperは奥が深いですが、慣れれば高機能なスライダーを実装することができます。昨今スライダーのデザインも複雑なものが増えてきていますので、様々な機能の実装に挑戦してみてはいかがでしょうか。