slickのドット(dots)をスライドの画像にする方法
slick(スリック)を使って実装したスライドショーのドット部分を、スライドの画像にする方法の備忘録です。
スライドショーを実装する
まずは、slickを使用して通常のスライドショーを実装します。slickの基本的な使い方は、こちらの記事でまとめています。
jQueryとslickファイルを読み込み、HTMLコードを記述します。
<div class="slider">
<div><img src="sample01.png"></div>
<div><img src="sample02.png"></div>
<div><img src="sample03.png"></div>
<div><img src="sample04.png"></div>
</div>
続いてスライドショーを実装するためのコードを</body>
の直前に追加します。
<script type="text/javascript">
jQuery(function(){
jQuery('.slider').slick({
autoplay: true,
autoplaySpeed: 3000,
infinite: true,
dots: true
});
});
</script>
エラーがなければ、下記のようなスライドショーが表示されます。
デザインを整えるため、一部のCSSを修正しています。
ドットを画像に変更する
スライド画像の下にあるドットをクリックすると、画像を切り替えることができます。
このドット部分を、スライドの画像になるようにコードを修正します。
jQuery(function(){
jQuery('.slider').slick({
autoplay: true,
autoplaySpeed: 3000,
infinite: true,
dots: true,
customPaging: function(slick,index) {
var targetImage = slick.$slides.eq(index).find('img').attr('src');
return '<img src=' + targetImage + '>';
},
});
});
「dots: true」の下に、下記のコードを追加しています。
customPaging: function(slick,index) {
var targetImage = slick.$slides.eq(index).find('img').attr('src');
return '<img src=' + targetImage + '>';
},
デザインを調整する
ドット部分のリストに画像が挿入されるので、画像の大きさなどをCSSで調整します。
.slick-dots {
bottom: -145px;
}
.slick-dots li {
width: 50px;
height: 50px;
}
今回は、「.slick-dots」で画像の表示位置、「.slick-dots li」で画像の大きさを調整しています。
画像をクリックすると、スライドショーが該当の画像に切り替わります。