到达最后一项时如何停止轮播滑动？

Question

我正在从头开始制作一个轮播，它包含 7 个项目，问题是当到达最后一个项目时我仍然可以单击下一个项目，我希望每次到达最后一个项目时都停止。

我是用transform来做滑动效果的，所以每次按next按钮都会增加translateX，我不知道这是不是更好的方法。

 transform: ${({ currentSlide }) =>
    currentSlide ? `translateX(-${currentSlide}00%)` : "translate(0%)"};

当我到达最后一项时，我不想要这么大的空间

这应该是最后一条狗出现时的预期结果

代码：https://codesandbox.io/s/dogs-carousel-u7126?file=/src/App.tsx

Answer 1

我会修改currentSlide 的处理方式。屏幕上有 3 张图片，轮播中总共有 7 张图片，将currentSlide 推进到第 5 张图片是导致空白空间的原因，因此通过钳制currentSlide 来防止它这样做应该可以解决问题：

// hopefully self-explanatory constants:
const NUM_IMAGES_VISIBLE = 3;
const NUM_IMAGES_TOTAL = 7;

// after sliding, try this, assuming currentSlide 0 is the first image:
currentSlide = Math.min( currentSlide, NUM_IMAGES_TOTAL - NUM_IMAGES_VISIBLE )