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

2023-04-03

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

サンプル

HTML

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

<!-- スライダー 1つ目 -->
<div class="slider" data-slick="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="slider-nav" data-slick="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>

<!-- スライダー 2つ目 -->
<div class="slider" data-slick="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="slider-nav" data-slick="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>

JS

.each()を使って､それぞれのスライダーとサムネイルを動作させます｡

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

	$(this).slick({
		autoplay: true,
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		asNavFor: '.slider-nav[data-slick="'+attr+'"]',
	});

	$('.slider-nav[data-slick="'+attr+'"]').slick({
		slidesToShow: 3,
		slidesToScroll: 1,
		asNavFor: '.slider[data-slick="'+attr+'"]',
		dots: true,
		centerMode: true,
		focusOnSelect: true
	});
});

以上｡

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

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

こういうHTMLだとしたら

<!-- スライダー 1つ目 -->
<div class="slider_wrap">
	<div class="slider">
		<div class="slide"><img src="img/img01.jpg"></div>
		<div class="slide"><img src="img/img02.jpg"></div>
	</div>
	<div class="slider-nav">
		<div class="slide"><img src="img/img01.jpg"></div>
		<div class="slide"><img src="img/img02.jpg"></div>
	</div>
</div>

<!-- スライダー 2つ目 -->
<div class="slider_wrap">
	<div class="slider">
		<div class="slide"><img src="img/img01.jpg"></div>
		<div class="slide"><img src="img/img02.jpg"></div>
	</div>
	<div class="slider-nav">
		<div class="slide"><img src="img/img01.jpg"></div>
		<div class="slide"><img src="img/img02.jpg"></div>
	</div>
</div>

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

$(".slider_wrap").each(function(i){
	$(this).find(".slider").attr("data-slick", i);
	$(this).find(".slider-nav").attr("data-slick", i);
});

$('.slider').each(function(){
・・・(略)