slickスライダーのdotsを数字にカスタマイズしたい

Question

slickスライダーのカスタマイズをしたかったのですがどうしてもできなく誰か助けて頂きたいです（ ; ; ）

標準のdotsだと、

このような感じに表示されると思うのですが、これを、、、

このように数字で表示させたいです。

やってみたこと
・ slick-theme.css内の.slick-dots li button:before{content: '•';}を'01'に変更。→確かに変わったのですが、全て01になってしまいました。。。

他に足りない情報などありましたらご指摘ください(>_<)
お手数おかけしますが、よろしくお願い致します。。。

Answer 1

まぁ良し悪し評価分かれそうですが

<style>
.slick-dots li {list-style:none;}
.slick-dots li:nth-child(1) button:before{content: '01';}
.slick-dots li:nth-child(2) button:before{content: '02';}
.slick-dots li:nth-child(3) button:before{content: '03';}
.slick-dots li:nth-child(4) button:before{content: '04';}
</style>
<ul class="slick-dots">
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
</ul>
<ul class="slick-dots">
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
</ul>

Answer 2

counterは<ol>だけに有効なのかと思ったら、<ul>にも効くんですね。
ということで、以下のようにします。

.slick-dots {
  list-style-type:none;
  counter-reset:number;
}
.slick-dots li button::before {
  counter-increment:number;
  content:'0'counter(number);
}
.slick-dots li:nth-child(9) ~ li button::before {
  content:counter(number);
}

使ったことないScriptなので、多分(未検証)な回答になりますが、ご了承ください。

Answer 3

customPaging | slick - にほんご。を参考にすれば実現可能です。

https://stackoverflow.com/questions/34660680/slick-slider-replace-dots-with-numbers

⇡のうち、customPagingを抜き出すとこんな感じ。

    customPaging : function(slider, i) {
    var thumb = $(slider.$slides[i]).data();
//  return '<a>'+(i+1)+'</a>';
    return `<a>${(i+1).toString().padStart(2, "0")}</a>`;
    },