【问题标题】:React Slick get current page numberReact Slick 获取当前页码
【发布时间】: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 可能会很慢,如果有人可以提出一个可以计算页数而不是幻灯片数的替代方案。

【问题讨论】:

    标签: reactjs react-slick


    【解决方案1】:

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

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

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

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

    【讨论】:

      猜你喜欢
      • 2013-05-10
      • 2021-09-29
      • 1970-01-01
      • 2018-08-05
      • 2022-12-14
      • 1970-01-01
      • 2015-07-20
      • 1970-01-01
      • 2011-05-07
      相关资源
      最近更新 更多