slickの連動設定を行うことで、複数のスライダー（例えば、メインスライダーとサムネイルスライダー）を同期させることができます。これにより、メインスライダーでスライドを変更すると、サムネイルスライダーも同時に変更されるなど、一貫したユーザー体験を提供できます。
基本設定
下記にてslickの基本を紹介していますのでご覧ください。
CodePen ソースコードサンプル
HTML構造の設定
<!-- メインスライダー -->
<div class="carousel slick">
<div><img src="https://web-developer-note.com/codepen/images/slide01.jpg" alt="スライド1" width="600" height="400" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide02.jpg" alt="スライド2" width="600" height="400" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide03.jpg" alt="スライド3" width="600" height="400" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide04.jpg" alt="スライド4" width="600" height="400" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide05.jpg" alt="スライド5" width="600" height="400" class="imgauto"></div>
</div>
<!-- サムネイルスライダー -->
<div class="thumbnail slick">
<div><img src="https://web-developer-note.com/codepen/images/slide01.jpg" alt="サムネイル1" width="150" height="100" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide02.jpg" alt="サムネイル2" width="150" height="100" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide03.jpg" alt="サムネイル3" width="150" height="100" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide04.jpg" alt="サムネイル4" width="150" height="100" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide05.jpg" alt="サムネイル5" width="150" height="100" class="imgauto"></div>
</div>slickの初期化
HTML構造が整ったら、JavaScriptでslickを初期化し、連動設定を行います。
$(function () {
$('.carousel').slick({
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 3000,
speed: 800,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
waitForAnimate: false,
asNavFor: '.thumbnail',
});
$('.thumbnail').slick({
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 3000,
speed: 800,
slidesToShow: 3,
slidesToScroll: 1,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
waitForAnimate: false,
asNavFor: '.carousel',
focusOnSelect: true,
});
});ポイント:
asNavForオプション: メインスライダーとサムネイルスライダーを互いに連動させるために使用します。focusOnSelect: true: サムネイルスライダーの画像をクリックすると、対応するメインスライダーのスライドに切り替わるように設定します。