Создайте круговую карусель в React Js без какой-либо библиотеки. ⇐ CSS

[Anonymous]

Я надеюсь воссоздать карусель, представленную на этом сайте. Я хочу добиться той же функциональности без использования какой-либо библиотеки. Я нашел много ресурсов о том, как этого добиться. Большинство из них создавали две копии карусели, а затем переключались между ними, но я не хочу этого делать. Приведенный ниже код работает нормально, пока я скользю внутри граничных элементов (1-й и последний слайд). Как я могу переключиться с последнего слайда на первый и наоборот? Я могу переключиться на первый слайд с последнего слайда, отрегулировав смещение влево, но это не сделает его похожим на бесконечный слайдер. Хочу сделать так, как на сайте. Является ли добавление первого слайда после последнего единственным способом добиться этого?
import {useRef, useEffect} из «реагировать»; импортировать {детали} из "./constants"; const App = () => { const carousel_track = useRef(); константный контейнер = useRef(); пусть счетчик = 0; константная карта = useRef(); const prevSlide = () => { константная ширина = card.current.offsetWidth; прилавок--; carousel_track.current.style.left = -width * counter + "px"; }; const nextSlide = () => { константная ширина = card.current.offsetWidth; счетчик++; carousel_track.current.style.left = -width * counter + "px"; }; useEffect(() => { addEventListener("keydown", (e) => { if (e.code === "ArrowRight") nextSlide(); if (e.code === "ArrowLeft") prevSlide(); }); }, []); возвращаться ( Предыдущий Следующий {details.map((слайд) => ( ))} ); }; экспортировать приложение по умолчанию;