仕事でslickを用いてスライドショーを作成しています。
その際「現在のページ/総ページ数」という表示にしなくてはならず下記のコードで記述。
同じclassで動いているため複数のスライダーが連動して動いてしまうことに加え総ページ数がどれかの最大数となってしまいます。(※1個目が4枚で2個目が2枚の場合4が表示されます。)
単純に別classやidを指定してjsを複製すれば動くのですが、それはせずにindexやeachなどを使用して複数に対応できないでしょうか?
html
1<ul class="slick"> 2 <li><img src="img01.jpg" alt=""></li> 3 <li><img src="img02.jpg" alt=""></li> 4 <li><img src="img03.jpg" alt=""></li> 5 ・ 6 ・ 7 ・ 8</div>
js
1$(function() { 2 $('.slick').on('init', function(event, slick) { 3 $(this).append('<div class="slick-counter"><span class="current"></span> / <span class="total"></span></div>'); 4 $('.current').text(slick.currentSlide + 1); 5 $('.total').text(slick.slideCount); 6 }) 7 .slick({ 8 slickのオプション指定してます 9 }) 10 .on('beforeChange', function(event, slick, currentSlide, nextSlide) { 11 $('.current').text(nextSlide + 1); 12 }); 13});
回答1件
あなたの回答
tips
プレビュー