Javascript – Slick slider replace dots with numbers


I'm trying to replace Slick slider / carousel pagination with numbers instead of dots. I have the project setup in js fiddle and I have have a custom function that displays the current slide count of a total of 6. I currently just have '1' replacing the dots but I would like to have the numbers represent the total number of slides.

JS Fiddle Demo


<section class="slider">

<span class="pagingInfo"></span>


autoplay: true,
dots: true,
customPaging : function(slider, i) {
var thumb = $(slider.$slides[i]).data();
return '<a>1</a>';
responsive: [{ 
    breakpoint: 500,
    settings: {
        dots: false,
        arrows: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 2

Best Solution

If i catch your meaning, Change this line:

return '<a>1</a>';

to this:

return '<a>'+i+'</a>';


return '<a>'+(i+1)+'</a>';

depending on where you want your index to start.

Here is your updated fiddle: