Javascript 如何使我的React滑块组件在x轴上无限大？

我以前从未构建过React滑块，我正在努力使它成为一个无限的幻灯片循环。目前有两张幻灯片，但我希望这样做，用户可以单击“下一张/上一张”按钮，幻灯片是无限的，反复重复幻灯片1和幻灯片2

我已经为幻灯片内容构建了一个名为

推荐

的容器。容器的宽度为800px

滑块具有

next

和

prev

按钮，可使滑块左右移动

Slider.tsx

import React，{useState}来自“React”；
从'@emotion/styled'导入样式；
从“盖茨比图像”导入Img；
从“../../@types/types”导入{SliderTypes}；
从“../components/Testional”导入证明文件；
常量滑块=（道具：滑块类型）=>{
常量滑块数据=[
{
索引：0，
图像：“图像”，
标题：“标题文本”，
证言：“证言描述”，
},
{
索引：1，
图像：“图像”，
标题：“标题文本”，
证言：“证言描述”，
},
];
const[properties，setProperties]=useState（sliderData）；
常量[property，setProperty]=useState（sliderData[0]）；
const nextProperty=（）=>{
const newIndex=property.index+1；
setProperty（properties[newIndex]）；
};
const prevProperty=（）=>{
const newIndex=property.index-1；
setProperty（properties[newIndex]）；
};
返回(
nextProperty（）}
禁用={property.index===properties.length-1}
>
下一个
prevProperty（）}已禁用={property.index==0}>
上
{sliderData.map（{索引、图像、标题、证明}）=>(
))}
);
};
导出默认滑块；

我很欣赏你的见解。提前谢谢