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

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

我以前从未构建过React滑块，但我一直在努力使其成为无限循环的幻灯片。当前有两张幻灯片，但我想制作一张，以便用户可以单击“下一个/上一个”按钮，并且幻灯片是无限的，一遍又一遍地重复幻灯片1和幻灯片2。

我为幻灯片内容构建了一个名为Testimonial的容器。容器的宽度为800像素。

滑块具有next和prev按钮，以使滑块向左和向右移动。

Slider.tsx

import React,{ useState } from 'react';
import styled from '@emotion/styled';
import Img from 'gatsby-image';
import { SliderTypes } from '../../@types/types';
import Testimonial from '../components/Testimonial';

const Slider = (props: SliderTypes) => {

  const sliderData = [
    {
      index: 0,image: 'image',header: 'Header text',testimonial: 'Testimonial description',},{
      index: 1,];

  const [properties,setProperties] = useState(sliderData);
  const [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]);
  };

  return (
    <>
      <button
        onClick={() => nextproperty()}
        disabled={property.index === properties.length - 1}
      >
        Next
      </button>
      <button onClick={() => prevproperty()} disabled={property.index === 0}>
        Prev
      </button>

      <CardSlider className={`card-slider active-slide-${property.index}`}>
        <CardSliderWrapper
          style={{
            transform: `translateX(-${
              property.index * (200 / properties.length)
            }%)`,}}
        >
          {sliderData.map(({ index,image,header,testimonial }) => (
            <Testimonial
              key={index}
              images={image}
              header={header}
              testimonial={testimonial}
            />
          ))}
        </CardSliderWrapper>
      </CardSlider>
    </>
  );
};

export default Slider;

我非常感谢您的见解。预先感谢！