Slick slider replace dots with numbers

Question

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

HTML

<section class="slider">
 <div>slide1</div>
 <div>slide2</div>
 <div>slide3</div>
 <div>slide4</div>
 <div>slide5</div>
 <div>slide6</div>
</section>

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

Javascript

$(".slider").slick({
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
    } 
}]
});

Chianti

Answer 1

If i catch your meaning, Change this line:

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

to this:

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

or

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

depending on where you want your index to start.

Here is your updated fiddle: https://jsfiddle.net/rLLvvpcm/5/

Kebab

Though IanGabes gave perfect fiddle as per slick docs, you must have to add all your event listeners on the slider before initializing it so that, the library can find attached ready events and trigger them. Here is the updated fiddle: jsfiddle.net/rLLvvpcm/81 – Acervate

i have multiple sliders, and i tried using this solution, but it updates all sliders pagination when i navigate. how can i scope it just to the slider im navigating? – Nessie

@Nessie give each slider is own id property in the markup (eg, slider1, slider2...). Then, iterate over each slider, selecting it by id with jQuery (instead of by class), and calling the slick function on each. If you use the above code in this question, you are selecting all sliders at once. – Kebab

i managed to solve it earlier doing something similar. thanks for the solution! – Nessie

Is it possible to start the counter (not current slide) with 1 instead of 0? – Popple

@Popple just use the second option, with i+1 – Kebab

the second option? – Popple