スライドショーを実装できるjQueryのプラグイン「slick」で、スライドの総数や現在のスライドが何番目かを表示するには、以下のように記述します。
JS
$(‘.slider’).on(‘init reInit afterChange’, function(event, slick, currentSlide, nextSlide) {
var i = (currentSlide ? currentSlide : 0) + 1;
$(‘.slider .current’).text(i);
$(‘.slider .total’).text(slick.slideCount);
});
$(‘.slider’).on(‘init reInit afterChange’, function(event, slick, currentSlide, nextSlide) {
var i = (currentSlide ? currentSlide : 0) + 1;
$(‘.slider .current’).text(i);
$(‘.slider .total’).text(slick.slideCount);
});
currentSlideで現在のスライドが何番目か取得し、slideCountでスライドの総数を取得しています。
また、currentクラスがついたhtmlタグの部分に現在のスライド番号を表示し、totalクラスがついたhtmlタグ部分にスライド総数を表示しています。
JavaScriptが学べるおすすめのスクール
jQueryは比較的覚えやすいと思うので、独学でも十分学べますが、JavaScriptの基本的なことから学びたいという人やjQueryの学習に行き詰まっている人は、プログラミングスクールで学ぶのもありです。
TechAcademy
- オンラインプログラミングスクール受講数No.1
- 講師・メンターが現役エンジニア
- 転職サポートがある
他のスクールとも比較して決めたい方は、JavaScriptと併せて何を学べるかという点に注意して、どのスクールを選ぶか決めるといいと思います。
JavaScriptが学べるプログラミングスクールとその選び方は以下の記事で解説しています。
Leave a Comment