import { Swiper, SwiperSlide } from 'swiper/react';
<div className={clsx(className, styles.swiper)} ref={ref}>
<Swiper
width={width}
slidesPerView="auto"
speed={speed}
loop={true}
spaceBetween={spaceBetweenItems}
loopedSlides={childrenArray.length}
allowTouchMove={allowTouchMove}
autoplay={{
delay: 1,
disableOnInteraction: false,
reverseDirection: reverse,
}}
className="carousel-autoplay"
>
{childrenArray.map((item, index) => {
return (
<SwiperSlide key={'slide' + index} style={{ width: 'max-content' }}>
{item}
</SwiperSlide>
);
})}
</Swiper>
</div>