プログラミング

slickで現在のスライドが総数の何番目か表示する

スライドショーを実装できる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);
});

currentSlideで現在のスライドが何番目か取得し、slideCountでスライドの総数を取得しています。

また、currentクラスがついたhtmlタグの部分に現在のスライド番号を表示し、totalクラスがついたhtmlタグ部分にスライド総数を表示しています。

JavaScriptが学べるおすすめのスクール

jQueryは比較的覚えやすいと思うので、独学でも十分学べますが、JavaScriptの基本的なことから学びたいという人やjQueryの学習に行き詰まっている人は、プログラミングスクールで学ぶのもありです。

TechAcademy

  • オンラインプログラミングスクール受講数No.1
  • 講師・メンターが現役エンジニア
  • 転職サポートがある

他のスクールとも比較して決めたい方は、JavaScriptと併せて何を学べるかという点に注意して、どのスクールを選ぶか決めるといいと思います。

JavaScriptが学べるプログラミングスクールとその選び方は以下の記事で解説しています。

JavaScriptが学べるおすすめのプログラミングスクール

Leave a Comment