React Slick 获取当前页码

Posted 2023-02-25

【中文标题】React Slick 获取当前页码

【英文标题】：React Slick get current page number

【发布时间】：2020-11-12 12:46:43

【问题描述】：

我查看了所有文档并设法使用下面的代码获取幻灯片的数量。有很多关于获取总幻灯片的解决方案，但没有在使用多张幻灯片时如何获取当前页码。本质上，它所在的点数。

我想用 currentPage / TotalPages 显示单独的导航箭头。即 1 / 4。我也有响应性，这使得硬编码计算变得更加困难。

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>;

拥有当前幻灯片意味着我当然会得到 5 / 2。

另外，我发现 slick 可能会很慢，如果有人可以提出一个可以计算页数而不是幻灯片数的替代方案。

【参考方案1】：

好吧，看来只是把它写出来清除了思维障碍。

我在转到下一页或上一页/幻灯片后使用状态。

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

仍然存在一些问题，因为它似乎一次向后滚动 1 个而不是向前滚动的相同数量，但这解决了上面的直接问题。