我想对数组中的已上传图片进行自动幻灯片显示轮播,我对图片进行了轮播形状和下一个prev按钮的上传,但轮播不会自动滑动 代码:
const Carousel = (props) => {
const [currentImageIndex, setCurrentImageIndex] = useState(0);
useEffect(() => {
setTimeout(() => {
if (props.images.length > 0) {
const resetAuto = currentImageIndex === props.images.length;
const index = resetAuto ? 0 : currentImageIndex + 1;
setCurrentImageIndex(index);
console.log(index);
}
}, 2000);
}, [props.images]);
const nextPrev = (e) => {
if (e) {
const resetIndex = currentImageIndex === props.images.length - 1;
const index = resetIndex ? 0 : currentImageIndex + 1;
setCurrentImageIndex(index);
} else {
const resetPrev = currentImageIndex === 0;
const index = resetPrev ? props.images.length - 1 : currentImageIndex - 1;
setCurrentImageIndex(index);
}
};
const activeImagesFromState = props.images.slice(
currentImageIndex,
currentImageIndex + 1
);
return (
<div className="slideshow-container">
{/* render images */}
{activeImagesFromState.map((image, index) => (
<img key={index} src={image} alt="" />
))}
<div>
<button onClick={(e) => nextPrev(true)}>Next</button>
<button onClick={(e) => nextPrev(false)}>Previous</button>
</div>
</div>
);
};
export default Carousel;
任何想法如何使用相同的代码,但使其自动滑动?