React Slick get current page number

Question

I have looked through all docs and managed to get the number of slides using the code below. There are plenty of solutions regarding getting total slides but not how to get current page number when using several slides. Essentially, the dot number it is on.

I want to show separate nav arrows with currentPage / TotalPages. i.e. 1 / 4. I also have responsive with makes it harder to hard code a calculation.

afterChange: (current) => setCurrentSlide(current + 1), - gives current slide number
customPaging: (i) => {
   setPageCounter(i + 1); - This gives me total number of pages
   return <a>{i}</a>;
}

Having the current slide means i get e.g 5 / 2 of course.

Alternatively, I find slick can be sluggish, if anybody can suggest an alternative that can count pages rather than number of slides also.

Answer 1

Ok, it seems just writing it out cleared a mind block.

I used state after going to next or prev page / slide.

const handlePrevSlide = () => {
    slider.current.slickPrev();
    currentPage > 1 && setCurrentPage(currentPage - 1);
};
const handleNextSlide = () => {
    slider.current.slickNext();
    currentPage < pageCounter && setCurrentPage(currentPage + 1);
};

There are still some issues as it seems to scroll back 1 at a time rather than the same amount it goes forward, but this solves the immediate issue above.