javascript：Swiper.jsを同じページに同じオプションで複数設置する時、オプションをまとめてコンパクトにする

だま
だま

jQuery非依存でスライダーを設置できる上にオプションも豊富で便利すぎる！もう手放せない！そんなSwiper.js。

※Swiper.js自体の設置方法はこちらで紹介されています。

しかしここ最近Swiper.jsを使用するにおいて毎度のごとく悩んでいる事がありました。それは...

同じページに同じオプションのスライダーを複数設置するとコードが長くてつらい

例えばこんな感じのサムネイル付きスライダー4つ。

スライダーサンプル画像

これをSwiper.jsで普通に指定すると......

<script>
	window.onload = function() {
		//スライダー1つ目
		var swiperThumb01 = new Swiper('.slider-thumb01', {
			slidesPerView: 3,
			spaceBetween: 15,
		});
		var swiperMain01 = new Swiper ('.slider-main01', {
			centeredSlides: true,
			thumbs: {
				swiper: swiperThumb01,
			},
			slidesPerView: 1,
		});
		//スライダー2つ目
		var swiperThumb02 = new Swiper('.slider-thumb02', {
			slidesPerView: 3,
			spaceBetween: 15,
		});
		var swiperMain02 = new Swiper ('.slider-main02', {
			centeredSlides: true,
			thumbs: {
				swiper: swiperThumb02,
			},
			slidesPerView: 1,
		});
		//スライダー3つ目
		var swiperThumb03 = new Swiper('.slider-thumb03', {
			slidesPerView: 3,
			spaceBetween: 15,
		});
		var swiperMain03 = new Swiper ('.slider-main03', {
			centeredSlides: true,
			thumbs: {
				swiper: swiperThumb03,
			},
			slidesPerView: 1,
		});
		//スライダー4つ目
		var swiperThumb04 = new Swiper('.slider-thumb04', {
			slidesPerView: 3,
			spaceBetween: 15,
		});
		var swiperMain04 = new Swiper ('.slider-main04', {
			centeredSlides: true,
			thumbs: {
				swiper: swiperThumb04,
			},
			slidesPerView: 1,
		});
	}
</script>

こうなります。長。

上記の例はかなりシンプルなオプションなので、フェードのアニメーション付けてページネーションの矢印も指定して...となるとコードが更に更にめちゃくちゃ長くなること必死です。

ちょっとオプション変えたいな～となった時に1つ1つ変更しないといけないのもかなり忌々しいですね。

という事で、今回はjavascriptを駆使してできるだけコンパクトにまとめました。
実際に書いたhtmlとjavascriptをそれぞれ紹介します。

例のごとくデモページもあります。

デモページ

html

今回は先程のサンプル画像のように、サムネイル付きのスライダーを複数設置する前提で解説していきます。

サムネイルを使用しない場合はサムネイル関連の記述を削除してOKです。

  • メインのスライダー用のswiper-containerに専用のclassを設定します。(今回はslider-main)
  • サムネイル用のswiper-containerにも専用のclassを設定します。(今回はslider-thumb)
  • 上記のスライダー2種をラッパー要素で囲みます。
    今回は「slider-wrap」というclassでラッパー要素を作成しました。
  • あとは設置したい個数だけどんどん設置していきます。
<!-- スライダー1つ目 -->
<div class="slider-wrap">
	<!-- メインのスライダー -->
	<div class="swiper-container slider-main">
		<ul class="swiper-wrapper">
			<li class="swiper-slide"><p><img src="img/swiper-multi/slider-01-01.jpg" alt=""></p></li>
			<li class="swiper-slide"><p><img src="img/swiper-multi/slider-01-02.jpg" alt=""></p></li>
			<li class="swiper-slide"><p><img src="img/swiper-multi/slider-01-03.jpg" alt=""></p></li>
		</ul>
	</div>
	<!-- サムネイル用スライダー -->
	<div class="swiper-container slider-thumb">
		<ul class="swiper-wrapper">
			<li class="swiper-slide"><p><img src="img/swiper-multi/slider-01-01.jpg" alt=""></p></li>
			<li class="swiper-slide"><p><img src="img/swiper-multi/slider-01-02.jpg" alt=""></p></li>
			<li class="swiper-slide"><p><img src="img/swiper-multi/slider-01-03.jpg" alt=""></p></li>
		</ul>
	</div>
</div>
<!-- スライダー2つ目 -->
<div class="slider-wrap">
	<!-- メインのスライダー -->
	<div class="swiper-container slider-main">
		<ul class="swiper-wrapper">
			<li class="swiper-slide"><p><img src="img/swiper-multi/slider-02-01.jpg" alt=""></p></li>
			<li class="swiper-slide"><p><img src="img/swiper-multi/slider-02-02.jpg" alt=""></p></li>
			<li class="swiper-slide"><p><img src="img/swiper-multi/slider-02-03.jpg" alt=""></p></li>
		</ul>
	</div>
	<!-- サムネイル用スライダー -->
	<div class="swiper-container slider-thumb">
		<ul class="swiper-wrapper">
			<li class="swiper-slide"><p><img src="img/swiper-multi/slider-02-01.jpg" alt=""></p></li>
			<li class="swiper-slide"><p><img src="img/swiper-multi/slider-02-02.jpg" alt=""></p></li>
			<li class="swiper-slide"><p><img src="img/swiper-multi/slider-02-03.jpg" alt=""></p></li>
		</ul>
	</div>
</div>
<!-- スライダー3つ目 -->............

javascript

だいたいコメントに書いてある通りの事をやっています。

<script>
	window.onload = function() {
		//ラッパー要素を指定
		var sliderWrap = document.querySelectorAll('.slider-wrap');
		//サムネイルのスライダーを指定
		var sliderThumb = document.querySelectorAll('.slider-thumb');
		//メインのスライダーを指定
		var sliderMain = document.querySelectorAll('.slider-main');
		//slider-wrapの数だけ繰り返す
		for (let i = 0; i < sliderWrap.length; i++) {
			//.slider-wrap、.slider-thumb、.slider-mainに01から始まる連番を振る
			var num = ('00' + (i+1)).slice(-2);
			sliderWrap[i].className += (num);
			sliderThumb[i].className += (num);
			sliderMain[i].className += (num);
			//サムネイル用のスライダー呼び出し&オプション指定
			var swiperThumb = new Swiper('.slider-thumb' + (num), {
				slidesPerView: 3,
				spaceBetween: 15,
			});
			//メインのスライダー呼び出し&オプション指定
			var swiperMain = new Swiper ('.slider-main' + (num), {
				centeredSlides: true,
				thumbs: {
					swiper: swiperThumb,
				},
				slidesPerView: 1,
			});
		}
	}
</script>

これでSwiper.jsのオプションをコンパクトにまとめる事ができました。やったね。

今回は複数のスライダーが「同じオプション」の場合の対処法なので、1つ1つオプションが異なる場合は諦めて別々に設定しましょう。

関連記事