slickにページカウントをつけてかつ複数個設置したいです。

Question

仕事でslickを用いてスライドショーを作成しています。
その際「現在のページ/総ページ数」という表示にしなくてはならず下記のコードで記述。

同じclassで動いているため複数のスライダーが連動して動いてしまうことに加え総ページ数がどれかの最大数となってしまいます。(※1個目が4枚で2個目が2枚の場合4が表示されます。)

単純に別classやidを指定してjsを複製すれば動くのですが、それはせずにindexやeachなどを使用して複数に対応できないでしょうか？

<ul class="slick">
  <li><img src="img01.jpg" alt=""></li>
  <li><img src="img02.jpg" alt=""></li>
  <li><img src="img03.jpg" alt=""></li>
    ・
    ・
    ・
</div>

$(function() {
  $('.slick').on('init', function(event, slick) {
    $(this).append('<div class="slick-counter"><span class="current"></span> / <span class="total"></span></div>');
    $('.current').text(slick.currentSlide + 1);
    $('.total').text(slick.slideCount);
  })
  .slick({
    slickのオプション指定してます
  })
  .on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    $('.current').text(nextSlide + 1);
  });
});

Comments

[kei344]

.currentや.totalはslickが生成する物でしょうか。もしそうでないならどういう構造になっているかがわかるHTMLを提示してください。

[hass-o]

.currentと.totalはベタでulの下に入れてもいいのですがとりあえずjs3行目のappendでスライドのあとに入るようになってます。
ブラウザの検証ツールなどで見るとulの中にdivが挿入されているかもしれません。

[kei344]

すみません、見落としていました。

Answer 1

$('.current', this) としてみてください。

Comments

[hass-o]

遅くなりすみません
上記のやり方+totalにもthisを追加したら複数のスライダーが連動せずに総ページ数もそれぞれ取得できました！
ありがとうございます