Reactjs 我想做图像幻灯片（旋转木马）

我想做图像幻灯片（旋转木马）。在这里我已经实现了使用计数。在这计数显示1234和4321。但我有声明常数与图像和文本，我想使用数组来显示它正确。因此，我将显示图像，但现在图像不显示。这是我的代码。请帮助我摆脱它

 import React, { Component } from "react";
    import { caroArray} from "../../common/Constants";

    class Caro extends Component {
       constructor(props) {
    super(props);
    this.state = {
      count: 1,
      anim: false,
    };
  }

  goLeft() {
    let neCount = this.state.count + 1;
    this.setState({
      count: neCount,
      anim: true,
    });

    console.log(this.state.count);

    if (this.state.count === 4) {
      this.setState({
        count: 1,
      });
    }
  }

  goRight = () => {
    let neCount = this.state.count - 1;
    this.setState({
      count: neCount,
      anim: true,
    });

    if (this.state.count === 1) {
      this.setState({
        count: 4,
      });
    }
    console.log(this.state.count);
  };

  render() {
    return (
      <div className="slider">
        {caroArray.map((caro, index) => {
          return (
            <div
              key={index}
              className="slide"
              // style={{ transform: `translateX(${x}%) ` }}
            >
              <img
                src={`/images/caro-${this.state.count}`}
                style={{
                  width: "100%",
                  height: "auto",
                }}
              />
              <div className="caro-text">
                <h2 className="text-center">{caro.title}</h2>
                <p className="text-justify">{caro.text}</p>
              </div>
            </div>
          );
        })}

        <button id="goLeft" onClick={() => this.goLeft()}>
          <i className="fa fa-chevron-left"></i>
        </button>

        <button id="goRight" onClick={this.goRight}>
          <i className="fa fa-chevron-right"></i>
        </button>
      </div>
    );
  }
}
export default Caro;


export const caroArray = [
  {
    src: "/caro/traumasurgery.jpg",
    title: "TRAUMA SURGERY",
    text:
      " Lorem Ipsum is simply dummy text of the printing and typesettings.Lorem Ipsum has been the industry's standard dummy.",
  },
  {
    src: "/caro/spinesurgery.webp",
    title: "SPINE SURGERY",
    text:
      " Lorem Ipsum is simply dummy text of the printing and typesettings.Lorem Ipsum has been the industry's standard dummy.",
  },
  {
    src: "/caro/jointreplacementsurgery.jpg",
    title: "JOINT REPLACEMENT SURGERY",
    text:
      " Lorem Ipsum is simply dummy text of the printing and typesettings.Lorem Ipsum has been the industry's standard dummy.",
  },
];
    
     

import React，{Component}来自“React”；
从“../../common/Constants”导入{caroArray}”；
类Caro扩展组件{
建造师（道具）{
超级（道具）；
此.state={
计数：1，
阿尼姆：错，
};
}
高尔夫球场（）{
设neCount=this.state.count+1；
这是我的国家({
计数：neCount，
阿尼姆：没错，
});
console.log（this.state.count）；
if（this.state.count==4）{
这是我的国家({
计数：1，
});
}
}
戈赖特=（）=>{
设neCount=this.state.count-1；
这是我的国家({
计数：neCount，
阿尼姆：没错，
});
if（this.state.count==1）{
这是我的国家({
计数：4，
});
}
console.log（this.state.count）；
};
render（）{
返回(
{caroArray.map（（caro，index）=>{
返回(
{caro.title}
{caro.text}
);
})}
this.goLeft（）}>
);
}
}
导出默认Caro；
导出常量caroArray=[
{
src:“/caro/traumasury.jpg”，
标题：“创伤外科”，
正文：
“Lorem Ipsum只是打印和排版设置的虚拟文本。Lorem Ipsum一直是业界的标准虚拟文本。”，
},
{
src:“/caro/spinesurgery.webp”，
标题：“脊柱手术”，
正文：
“Lorem Ipsum只是打印和排版设置的虚拟文本。Lorem Ipsum一直是业界的标准虚拟文本。”，
},
{
src:“/caro/jointreplacementsurgery.jpg”，
标题：“关节置换手术”，
正文：
“Lorem Ipsum只是打印和排版设置的虚拟文本。Lorem Ipsum一直是业界的标准虚拟文本。”，
},
];