slickのデフォルトでは、スライドの下部にドットナビゲーションが表示されますが、これをサムネイル画像に変更することで、より視覚的で直感的なナビゲーションを提供することが可能です。この記事では、slickのdotsをサムネイルに変更する方法を具体的なコード例とともに詳しく解説します。
基本設定
下記にて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>CSSのカスタマイズ
サムネイル画像をdotsとして表示するためには、slickが生成するドットに対してカスタムCSSを適用します。また、レスポンシブ対応のためのスタイルも追加します。
@media (hover: hover) {
.carousel .slick-dots li:hover {
opacity: 0.7;
}
}
@media screen and (min-width: 768px) {
.carousel .slick-dots {
width: 95%;
max-width: 700px;
margin-inline: auto;
position: static;
display: flex;
}
.carousel .slick-dots li {
width: unset;
height: unset;
margin: 0 5px 0 0;
flex: 1;
}
}解説:
- ホバー時の透明度調整: デスクトップ環境でマウスホバー時にドット（サムネイル）の透明度を0.7に設定し、視覚的なフィードバックを提供します。
- ドットのレイアウト調整: 画面幅が768px以上の場合、ドット（サムネイル）を中央揃えにし、フレックスボックスを使用して均等に配置します。これにより、サムネイルの整列が整い、見た目が美しくなります。
slickの初期化
HTML構造とCSSが整ったら、JavaScriptでslickを初期化し、dotsをサムネイルに変更します。
$(function () {
$('.carousel').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 3000,
speed: 800,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
waitForAnimate: false,
dots: true,
customPaging: function (slick, index) {
var targetImage = slick.$slides.eq(index).find('img').attr('src');
return '<img src="' + targetImage + '" alt="サムネイル' + (index + 1) + '">';
},
responsive: [{
breakpoint: 767,
settings: {
slidesToShow: 1,
customPaging: function () {
return '<button type="button" role="tab"></button>'; // スマートフォンではドットを通常のボタンに戻す
},
}
}]
});
});解説:
dots: true: ドットナビゲーションを有効にします。customPaging関数: 各ドットをサムネイル画像に置き換えるための関数です。slickオブジェクトから対応するスライドの画像URLを取得し、<img>タグとして返します。- レスポンシブ設定: 画面幅が767px以下の場合、
customPaging関数を通常のボタンに戻します。これにより、スマートフォンなどの小さい画面ではドットをサムネイルではなく、標準的なボタンとして表示します。