到达最后一张幻灯片时如何转到第一张幻灯片？

Question

我有这个滑块，效果很好。但是，当它到达最后一张幻灯片时，我希望它继续移动到 RIGHT 并显示 SLIDE 1。我的问题是，一旦到达最后一张幻灯片，它就会移至SLIDE 1，但会移至LEFT。有人能指出我正确的方向吗？预先非常感谢！

这是我的现场演示：https://stackblitz.com/edit/react-ubg8sg?file=src%2FApp.js,src%2Fassets%2Fdata.js,src%2Fstyle.css,src%2Findex.css ,src%2Findex.js

这是我处理滚动的函数：

    const scrollToImage = (direction) => {
    if (direction === 'prev') {
      setCurrentIndex((curr) => {
        const isFirstSlide = currentIndex === 0;
        return isFirstSlide ? 0 : curr - 1;
      });
    } else {
      const isLastSlide = currentIndex === data.length - 1;
      if (!isLastSlide) {
        setCurrentIndex((curr) => curr + 1);
      } else {
        setCurrentIndex(0);
      }
    }
  };

Answer 1

您需要像这样定义两个助手：

  const getNext = (curr, count) => (curr + 1) % count;
  const getPrev = (curr, count) => {
    curr--;
    return curr >= 0 ? curr : count - 1;
  };

  const scrollToImage = (direction) => {
    setCurrentIndex((curr) => {
      const count = data.length;
      return direction === 'next'
        ? getNext(curr, count)
        : getPrev(curr, count);
      
    });
  };

附注在您的沙箱中测试了此代码并且它有效！