slick.jsでサムネイルスライダーを作成(改善版)

jQuery


当記事では、できるだけわかりやすく、簡潔に上記のようなサムネイルスライダーを作成する方法について記しています。



前に以下のような記事を書いたのですが、全く違う方法で簡潔に作成できることに気づいたので、改善版です。
slick.jsのドットをカスタマイズしてサムネイルスライダー作ってみた




slick.jsの基本的な使い方はご存知の前提で進めさせていただきますので、slick初めてという方は下記の記事などが参考になるかもしれません。
slick.jsでシンプルなスライダーを実装する方法【たった4ステップです】



※最後にコードの全文を載せております。


①通常のスライダーを二つ作成する

<style>
	.slider-container{
		width:50%;
		margin:0 auto;
	}
	.slick-prev,.slick-next{z-index:2;}
	.slick-prev{left:0!important;}
	.slick-next{right:0!important;}
</style>


<div class="slider-container">
	<div id="slider">
		<img src="./img/slider_img01.jpg">
		<img src="./img/slider_img02.jpg">
		<img src="./img/slider_img03.jpg">
	</div>
	<div id="thumbs">
		<img src="./img/slider_img01.jpg">
		<img src="./img/slider_img02.jpg">
		<img src="./img/slider_img03.jpg">
	</div>
</div>


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<script>
	$("#slider").slick({
    //ここにオプション
  })
	$("#thumbs").slick({
   //ここにオプション
  })
</script>


スライダーが二つできました。現時点ではそれぞれが独立しています。




②二つのスライダーを連携する

slickオプションに『asNavFor』を設定することで二つのスライダーを連携できます。

$("#slider").slick({
	//ここにオプション
	asNavFor:"#thumbs",
})
$("#thumbs").slick({
	//ここにオプション
	asNavFor:"#slider",
})


二つのスライダーが連携されました。
下のデモで一方のスライダーを動かすともう一方も連携して動くようになっていると思います。





③サムネイルを枚数分すべて表示する

サムネイルの方のslickオプションにslidesToShowを設定します。
値はスライドの数と同じにします。

$("#thumbs").slick({
	//ここにオプション
	asNavFor:"#slider",
	slidesToShow: 3,
})





④サムネイルのクリックでメインスライダーを動かす

slick(“slickGoTo”,スライドの番号) で指定したスライドへ移動できるので、サムネイルクリック時にそれを実行します。

	$("#thumbs .slick-slide").on("click",function(){
		let index=$(this).attr("data-slick-index")
		$("#slider").slick("slickGoTo",index)
	})


サムネイルをクリックすることで、スライダーが動くようになりました。






⑤表示中のスライドのサムネイルにフォーカスをあてる

こちらはCSSで実現します。ついでにサムネイル間に隙間も作ります。

#thumbs .slick-current > div{
		border:2px solid #000;
}
.slick-slide{
	padding:5px;
}






以上、slick.jsでサムネイルスライダーを作成する方法でした。


最後にコードを全文載せます。

<style>
	.slider-container{
		width:50%;
		margin:0 auto;
	}
	.slick-slide{
		padding:5px;
	}
	#thumbs .slick-current > div{
		border:2px solid #000;
	}
	.slick-prev,.slick-next{z-index:2;}
	.slick-prev{left:0!important;}
	.slick-next{right:0!important;}
</style>

<div class="slider-container">
	<div id="slider">
		<img src="./img/slider_img01.jpg">
		<img src="./img/slider_img02.jpg">
		<img src="./img/slider_img03.jpg">
	</div>
	<div id="thumbs">
		<img src="./img/slider_img01.jpg">
		<img src="./img/slider_img02.jpg">
		<img src="./img/slider_img03.jpg">
	</div>
</div>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
	$("#slider").slick({
		asNavFor:"#thumbs"
	})
	$("#thumbs").slick({
		slidesToShow: 3,
		asNavFor:"#slider",
	})
	$("#thumbs .slick-slide").on("click",function(){
		let index=$(this).attr("data-slick-index")
		$("#slider").slick("slickGoTo",index)
	})
</script>

コメント

タイトルとURLをコピーしました