Javascript 如何使carousel自动更改而不是单击ReactJs上的onclick with loop

我正在尝试使用这个旋转木马的方式为我的旗帜。如何在不单击左右按钮的情况下使其自动更改。由于只有2个图像，我如何使其循环

import React, { useState } from "react";
import "./Carousel.css";
import { images } from "../Helpers/CarouselData";


function Carousel() {
  const [currImg, setCurrImg] = useState(0);

  return (
    <div className="carousel">
      <div
        className="carouselInner"
        style={{ backgroundImage: `url(${images[currImg].img})` }}
      >
        <div
          className="left"
          onClick={() => {
            currImg > 0 && setCurrImg(currImg - 1);
          }}
        >
          
        </div>
        <div className="center">
          <h1>{images[currImg].title}</h1>
          <p>{images[currImg].subtitle}</p>
        </div>
        <div
          className="right"
          onClick={() => {
            currImg < images.length - 1 && setCurrImg(currImg + 1);
          }}
        >
          
        </div>
      </div>
    </div>
  );
}

export default Carousel;

import React，{useState}来自“React”；
导入“/Carousel.css”；
从“./Helpers/CarouselData”导入{images}”；
函数旋转木马（）{
const[currImg，setCurrImg]=useState（0）；
返回(
{
currImg>0&&setCurrImg（currImg-1）；
}}
>
{图像[currImg].title}
{图像[当前].字幕}

{
currImg
);
}
导出默认旋转木马；

您可以设置一个时间间隔，在后台运行它，更改电流。下面的代码假设您有两张幻灯片。如果您有更多幻灯片，您可以自定义它

useEffect(()=> {
   const changeSlide = setInterval(() => setCurrImg(prevState => 1-prevState) , 1000) // change your switch time here.
   return () => clearInterval(changeSlide);
}, [])

---

谢谢你的解决方案，但是当我尝试使用它的时候。当它更改为下一个背景时将出现错误。像

TypeError:无法读取未定义的
的属性'img'，并指向
style={{backgroundImage:url（${images[currImg].img}}}}
。你知道吗？@czroo我更新了我的答案。如果它不起作用，告诉我是的，这完全起作用了。非常感谢