スライダーを実装できるjQueryのプラグイン「slick」で、ドットのナビゲーションをスライド画像に変更するには、以下のようにすればOKです。
JS
$(‘.slider’).slick({
dots: true,
customPaging: function(slick,index) {
var targetImage = slick.$slides.eq(index).find(‘img’).attr(‘src’);
return ‘<img src=” ‘ + targetImage + ‘”>’;
},
});
$(‘.slider’).slick({
dots: true,
customPaging: function(slick,index) {
var targetImage = slick.$slides.eq(index).find(‘img’).attr(‘src’);
return ‘<img src=” ‘ + targetImage + ‘”>’;
},
});
スライドのインデックス番号に対応した画像のsrcを取得し、ドットナビゲーション部分に設定しています。
JavaScriptが学べるおすすめのスクール
jQueryは比較的覚えやすいと思うので、独学でも十分学べますが、JavaScriptの基本的なことから学びたいという人やjQueryの学習に行き詰まっている人は、プログラミングスクールで学ぶのもありです。
TechAcademy
- オンラインプログラミングスクール受講数No.1
- 講師・メンターが現役エンジニア
- 転職サポートがある
他のスクールとも比較して決めたい方は、JavaScriptと併せて何を学べるかという点に注意して、どのスクールを選ぶか決めるといいと思います。
JavaScriptが学べるプログラミングスクールとその選び方は以下の記事で解説しています。
Leave a Comment