React Carousel自动幻灯片放映

时间:2020-06-16 00:42:09

标签: javascript html reactjs carousel

我想对数组中的已上传图片进行自动幻灯片显示轮播,我对图片进行了轮播形状和下一个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;

任何想法如何使用相同的代码,但使其自动滑动?

0 个答案:

没有答案