【bxSlider】サムネイル付きスライダーを複数設定する方法

2023-05-17

jQueryのスライダープラグイン「bxSlider」のサムネイル付きスライダーを同一ページに複数設置するサンプルコードをご紹介｡

そもそもbxSliderでサムネイル付きスライダを作成する方法はbxSlider公式をご覧ください｡

jQuery Content Slider | Responsive jQuery Slider | bxSlider

サンプル

HTML

スライダーと､サムネイル用のHTMLを作るときに､data-slider属性を付与して､スライダーとサムネイルとで同じ値になるようにします｡

<!-- スライダー 1つ目 -->
<div class="bxslider" data-slider="01">
	<div class="slide"><img src="img/img01.jpg"></div>
	<div class="slide"><img src="img/img02.jpg"></div>
	<div class="slide"><img src="img/img03.jpg"></div>
	<div class="slide"><img src="img/img04.jpg"></div>
</div>
<!-- サムネイル -->
<div class="bx-pager" data-slider="01">
	<a data-slide-index="0" href=""><img src="img/img01.jpg"></a>
	<a data-slide-index="1" href=""><img src="img/img02.jpg"></a>
	<a data-slide-index="2" href=""><img src="img/img03.jpg"></a>
	<a data-slide-index="3" href=""><img src="img/img04.jpg"></a>
</div>

<!-- スライダー 2つ目 -->
<div class="bxslider" data-slider="02">
	<div class="slide"><img src="img/img01.jpg"></div>
	<div class="slide"><img src="img/img02.jpg"></div>
	<div class="slide"><img src="img/img03.jpg"></div>
	<div class="slide"><img src="img/img04.jpg"></div>
</div>
<!-- サムネイル -->
<div class="bx-pager" data-slider="02">
	<a data-slide-index="0" href=""><img src="img/img01.jpg"></a>
	<a data-slide-index="1" href=""><img src="img/img02.jpg"></a>
	<a data-slide-index="2" href=""><img src="img/img03.jpg"></a>
	<a data-slide-index="3" href=""><img src="img/img04.jpg"></a>
</div>

JS

.each()を使って､それぞれのスライダーとサムネイルを関連付けます｡

$('.bxslider').each(function(){
	//data-sliderの値を取得
	let attr = $(this).attr('data-slider');

	$(this).bxSlider({
		pagerCustom: '.bx-pager[data-slider="'+attr+'"]'
	});
});

以上｡

(おまけ) data-slider も自動的に付与する

data-sliderを手動で付与するのが面倒な場合

こういうHTMLだとしたら

<!-- スライダー 1つ目 -->
<div class="slider_wrap">
	<div class="bxslider">
		<div class="slide"><img src="img/img01.jpg"></div>
		<div class="slide"><img src="img/img02.jpg"></div>
	</div>
	<div class="bx-pager">
		<a data-slide-index="0" href=""><img src="img/img01.jpg"></a>
		<a data-slide-index="1" href=""><img src="img/img02.jpg"></a>
	</div>
</div>
<!-- スライダー 2つ目 -->
<div class="slider_wrap">
	<div class="bxslider">
		<div class="slide"><img src="img/img01.jpg"></div>
		<div class="slide"><img src="img/img02.jpg"></div>
	</div>
	<div class="bx-pager">
		<a data-slide-index="0" href=""><img src="img/img01.jpg"></a>
		<a data-slide-index="1" href=""><img src="img/img02.jpg"></a>
	</div>
</div>

こうしてから､bxSlider()します｡

$(".slider_wrap").each(function(i){
	$(this).find(".bxslider").attr("data-slider", i);
	$(this).find(".bx-pager").attr("data-slider", i);
});

$('.bxslider').each(function(){
	//data-sliderの値を取得
	let attr = $(this).attr('data-slider');

	$(this).bxSlider({
		auto: true,
		pagerCustom: '.bx-pager[data-slider="'+attr+'"]'
	});
});