当您位于索引末尾时如何关闭幻灯片？

Question

我正在使用Nextjs/Sanity。有一个带有图像索引的幻灯片，我希望当你点击"下一个"图标时，当它位于库中的最后一张图像时，它会关闭。到目前为止，如果你点击第一张图片上的上一个箭头，我可以关闭图库，如下所示：

const slidePrev = () => {
slideIndex === 0
? setSlideIndex( imagesData.length - 1)
: setSlideIndex( slideIndex - 1)
if(slideIndex <= 0){
setOpenImage(false)
}
}

但当我试图将相同的规则应用于最终图像的下一个箭头时，它仍然注册了一个(未定义的(图像：

const slideNext = () => {
slideIndex + 1 === imagesData.length
? setSlideIndex(0)
: setSlideIndex(slideIndex + 1)
if(slideIndex + 1 >= imagesData.length + 1){
setOpenImage(false)
}
}

Answer 1

slideIndex是从索引0开始的数组的索引值。imagesData.length是数组中项目的数量。因此，如果您的最后一个slideIndex是4，则意味着列表中实际上有5项。

也就是说slideNext中的条件不应该是slideIndex + 1 >= imagesData.length + 1而是slideIndex + 1 >= imagesData.length。