【簡単】slickスライダーでサムネイルを連動・固定2列2段以上で表示させる方法
サムネイル付きのslickスライダーを実装したい。
サムネイルを連動させることはできたが、サムネイルをスライダーではなく固定にし、2列2段以上で表示したい。
本記事ではCSSを使ってこのような悩みを解決します。
※jQueryとslickのプラグインを使うのであらかじめCDNなどご準備ください。
参考CDN
<!-- slick_CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" />
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<!-- slick_JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
実装サンプル
See the Pen
固定サムネイル2段以上slickスライダー by Kohei (@kouk05)
on CodePen.0
slickスライダーとサムネイルを2列2段で表示させた実装サンプルです。
実際にサムネイルをクリックして頂くと連動されてるのがわかります。
導入方法の詳細は次章より説明します。
htmlコード
<!-- スライダー -->
<div class="slider-area">
<div class="slider">
<div class="slider-item">
<img src="https://placehold.jp/ff0000/ffffff/300x200.png" alt="">
</div>
<div class="slider-item">
<img src="https://placehold.jp/00ff00/ffffff/300x200.png" alt="">
</div>
<div class="slider-item">
<img src="https://placehold.jp/0000ff/ffffff/300x200.png" alt="">
</div>
<div class="thumnail-item">
<img src="https://placehold.jp/00ffff/ffffff/300x200.png" alt="">
</div>
<div class="slider-item">
<img src="https://placehold.jp/ffff00/ffffff/300x200.png" alt="">
</div>
<div class="slider-item">
<img src="https://placehold.jp/ff00ff/ffffff/300x200.png" alt="">
</div>
</div>
<!-- サムネイル -->
<div class="thumnail">
<div class="thumnail-item">
<img src="https://placehold.jp/ff0000/ffffff/150x100.png" alt="">
</div>
<div class="thumnail-item">
<img src="https://placehold.jp/00ff00/ffffff/150x100.png" alt="">
</div>
<div class="thumnail-item">
<img src="https://placehold.jp/0000ff/ffffff/150x100.png" alt="">
</div>
<div class="thumnail-item">
<img src="https://placehold.jp/00ffff/ffffff/150x100.png" alt="">
</div>
<div class="thumnail-item">
<img src="https://placehold.jp/ffff00/ffffff/150x100.png" alt="">
</div>
<div class="thumnail-item">
<img src="https://placehold.jp/ff00ff/ffffff/150x100.png" alt="">
</div>
</div>
</div>
まずスライダーのhtml要素を用意します。
スライダー本体とサムネイルをdivタグなど使って作成してください。
jQueryコード
$(function() {
//スライダー
$(".slider").slick({
autoplay: false,
arrows: false,
asNavFor: ".thumnail",
});
//サムネイル
$(".thumnail").slick({
autoplay: false,
arrows: false,
slidesToShow: 6,
asNavFor: ".slider",
focusOnSelect: true,
});
});
次にslick実行関数をjQueryを使ってscript内に記述します。
スライダーとサムネイル用二つ用意します。
連動させるにはasNavForプロパティを使います。
上記プロパティにそれぞれ連動させたい要素のクラス名を記述します。
サムネイル側のslick関数内で、slidesToShowプロパティを設定し、スライダーの枚数を指定します。
次にfocusOnSelectプロパティをサムネイル側で設定します。
上記プロパティをtrueに指定する事でサムネイルをタッチ・クリックしたら連動してるスライダーが動くようになります。
ＣSSコード
//画像をブロック要素にする
.slider-area img {
max-width: 100%;
display: block;
height: auto;
}
//スライダーの幅を指定、overflow: hidden;で横スクロールを除外
.slider-area {
overflow: hidden;
max-width: 300px;
width: 100%;
margin: auto;
}
//サムネイル
//display: flex;を指定、transformをunsetにする
.thumnail .slick-track {
transform: unset !important;
width: 100% !important;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
//flexの値を変更し列数を変更
.thumnail .slick-slide {
display: block!important;
float: none !important;
flex: 0 0 47.5%;
}
最後にCSSで調整します。
スライダーの画像はブロック要素に変更します。
スライダーとサムネイル要素を親要素で囲み、その親要素にスライダーの幅を指定します。
またoverflow: hidden;を指定します。
サムネイル側でslickをいれると自動生成されるslick-trackクラスにtransform: unset !important;、width: 100% !important;を指定する事で、スライダー仕様を打ち消し、固定にできます。
固定にしたらdisplay: flex;・justify-content: space-between;・flex-flow: row wrap;を指定し、要素を横並びに間隔を開け、複数行指定にします。
次にslick-trackクラスの疑似要素（before要素、after要素）をdisplay: none;で消します。
最後に同じく自動生成されるslick-slideクラスにdisplay: block!important;・float: none !important;を指定してデフォルト仕様を解除し、flexプロパティで何列にするかパーセントで指定します。
2列の場合はflexの値を50％、3列の場合は33.3333%にするなど全体のパーセンテージ100%に対し、分割する事で任意に列数を変更できます。
上記サンプルコードでは47.5%に指定しており、2列で且つ2.5％間隔を開けてます。
以上で2列2段のサムネイル付き連動slickスライダーの完成です。
まとめ
サムネイルを固定にするとなると少し厄介ですが、本記事のソースをコピペすれば簡単に実装できます。
ＥCサイトの商品ページなどでよく見かける仕様なのでぜひ参考にしてみてください。
以上で解説を終わります。