Reactjs 带react的图像滑块

我正在尝试添加带有react的图像滑块，但在单击应更新阵列中图像的按钮时，无法确定如何更新图像

import Volleyball from '../../assets/images/volleyball.jpg'
import Gaming from '../../assets/images/gaming.jpg'
import Coding from '../../assets/images/coding.jpg'

const ImageGallary = () => {

  let imgArray = [Volleyball, Gaming, Coding];
  const [images, setImages] = useState([...imgArray])


  const prevImage = () => {

  }

return (

 <div className={classes.gallary}>
     <div className={classes.direction}>
         <button className={classes.leftArrow} onClick={prevImage}>Left</button>
         <button className={classes.rightArrow} >Right</button>
     </div>
     <div className={classes.images}>
        {images.map((a, i) => {
            return <img className={classes.image} src={a} alt="" key={i} />
         })}
     </div>

 </div>

)

从“../../assets/images/Volleyball.jpg”导入排球
从“../../assets/images/Gaming.jpg”导入游戏
从“../../assets/images/Coding.jpg”导入编码
常量ImageGallary=（）=>{
让Imgaray=[排球、游戏、编码]；
常量[images，setImages]=useState（[…imgArray]）
常量prevImage=（）=>{
}
返回(
左边
正当
{images.map（（a，i）=>{
回来
})}
)

这是一种简单的方法，只需更新索引和显示即可更改图像

import Volleyball from '../../assets/images/volleyball.jpg'
    import Gaming from '../../assets/images/gaming.jpg'
    import Coding from '../../assets/images/coding.jpg'

    const ImageGallary = () => {

      let imgArray = [Volleyball, Gaming, Coding];
     this.state={
    images:[...],
    currentShow:0
    }

      const prevImage = (conditon) => {
    const {images,currentShow}=this.state
       if(conditon){
    if(currentShow >= images.length){
    this.setState({currentShow:0})
    }esle{
    this.setState({currentShow:currentShow+1})
    }
       }else{
    if(currentShow < 0){
    this.setState({currentShow:images.length})
    }esle{
    this.setState({currentShow:currentShow-1})
    }
        }
      }

    return (

     <div className={classes.gallary}>
         <div className={classes.direction}>
             <button className={classes.leftArrow} onClick={()=>this.prevImage(false)}>Left</button>
             <button className={classes.rightArrow} onClick={()=>this.prevImage(true)} >Right</button>
         </div>
         <div className={classes.images}>
          <img className={classes.image} src={images[currentShow]} alt="" key={currentShow} />
         </div>

     </div>

    )

从“../../assets/images/Volleyball.jpg”导入排球
从“../../assets/images/Gaming.jpg”导入游戏
从“../../assets/images/Coding.jpg”导入编码
常量ImageGallary=（）=>{
让Imgaray=[排球、游戏、编码]；
这个州={
图片：[……]，
当前显示：0
}
const prevImage=（条件）=>{
const{images，currentShow}=this.state
如果（条件）{
如果（currentShow>=images.length）{
this.setState（{currentShow:0}）
}埃斯勒{
this.setState（{currentShow:currentShow+1}）
}
}否则{
如果（当前显示<0）{
this.setState（{currentShow:images.length}）
}埃斯勒{
this.setState（{currentShow:currentShow-1}）
}
}
}
返回(
this.prevImage（false）}>左
this.prevImage（true）}>右
)

为什么不试试这个呢

从“../../assets/images/Volleyball.jpg”导入排球
从“../../assets/images/Gaming.jpg”导入游戏
从“../../assets/images/Coding.jpg”导入编码
常数imagesToDisplay=[
{
id:1，
src:排球，
alt:“排球”，
},
{
id:2，
src：游戏，
alt:“游戏”，
},
{
id:3，
src：编码，
alt:“编码”，
}
]
常量ImageGallary=（）=>{
const[currentImage，setCurrentImage]=useState（imagesToDisplay[0]）；
常量HandlePreImage=（）=>{
const prevImage=imagesToDisplay.find（image=>image.id==（currentImage.id-1））；
if（prevImage&&prevImage.length）{
setCurrentImage（prevImage[0]）；
}
};
常量handleNextImage=（）=>{
const nextImage=imagesToDisplay.find（image=>image.id==（currentImage.id+1））；
if（nextImage&&nextImage.length）{
setCurrentImage（下一个图像[0]）；
}
};
返回(
左边
正当
);
}

这是可行的，但我希望所有图像都显示在一行中，并与阵列中的下一个图像一起改变位置。这可能很简单，请您共享屏幕截图或草图，以清楚地了解您想要的内容：-）