当記事では、できるだけわかりやすく、簡潔に上記のようなサムネイルスライダーを作成する方法について記しています。
前に以下のような記事を書いたのですが、全く違う方法で簡潔に作成できることに気づいたので、改善版です。
slick.jsのドットをカスタマイズしてサムネイルスライダー作ってみた
slick.jsの基本的な使い方はご存知の前提で進めさせていただきますので、slick初めてという方は下記の記事などが参考になるかもしれません。
slick.jsでシンプルなスライダーを実装する方法【たった4ステップです】
※最後にコードの全文を載せております。
Contents
①通常のスライダーを二つ作成する
<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">
<div><img src="./img/slider_img01.jpg"></div>
<div><img src="./img/slider_img02.jpg"></div>
<div><img src="./img/slider_img03.jpg"></div>
</div>
<div id="thumbs">
<div><img src="./img/slider_img01.jpg"></div>
<div><img src="./img/slider_img02.jpg"></div>
<div><img src="./img/slider_img03.jpg"></div>
</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 img{
border:3px solid #000;
}
.slick-slide{
padding:2px;
}ソースコード全文
最後にコードを全文載せます。
<style>
.slider-container{
width:50%;
margin:0 auto;
}
.slick-slide{
padding:2px;
}
#thumbs .slick-current img{
border:3px 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">
<div><img src="./img/slider_img01.jpg"></div>
<div><img src="./img/slider_img02.jpg"></div>
<div><img src="./img/slider_img03.jpg"></div>
</div>
<div id="thumbs">
<div><img src="./img/slider_img01.jpg"></div>
<div><img src="./img/slider_img02.jpg"></div>
<div><img src="./img/slider_img03.jpg"></div>
</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>以上、slick.jsでサムネイルスライダーを作成する方法でした。
他にもslick.jsで実装できる様々なスライダーを紹介しているので興味があればご参考ください！
slick.jsでよく作るスライダーを10種類紹介
コメント