export default function App() {
  let data = [...new Array(9)].map((_, i) => i);
  return (
    <>
      <Swiper
        slidesPerView={"auto"}
        loop={true}
        centeredSlides={true}
        spaceBetween={40}
        // loopedSlides={1}
        pagination={{
          clickable: true,
        }}
        navigation={true}
        modules={[Pagination, Navigation]}
        className="mySwiper"
      >
        {data.map((i) => {
          return (
            <SwiperSlide key={i}>
              <Slide id={i} />
            </SwiperSlide>
          );
        })}
      </Swiper>
    </>
  );
}

function Slide({ id }) {
  return (
    <div
      style={{
        background: "#cff",
        width: 400,
        height: 300,
        // transform: "scale(0.75)",
      }}
    >
      Slide {id}
    </div>
  );
}