Движущаяся картинка в виде карусели ⇐ CSS

[Anonymous]

Итак, вот в чем дело: у меня есть машинописный проект, который выглядит так

const MainPage = () => {
const allBooks = [, , , , ];
const [currentIndex, setCurrentIndex] = useState(0);

Код: Выделить всё

const moveLeft = () => {
setCurrentIndex((prevIndex) => (prevIndex - 1 + allBooks.length) % allBooks.length);
};

const moveRight = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % allBooks.length);
};

return (



LEFT


{allBooks.map((book, index) => (

{book}

))}



RIGHT



);

};
экспортировать главную страницу по умолчанию;

Как можете см. У меня есть такие элементы, как книги, и я хочу создать функцию, которая будет работать, например, как карусель
кнопкаЛевая книга1 книга2 книга3 книга4 книга5 кнопкаВправо
при нажатии кнопкиВлево книга в середине перемещается к влево, а книга, которая была справа, перемещается в в центре и то же самое с правой кнопкой, поэтому я попытаюсь визуализировать это
кнопкаЛевая книга1 книга2 книга3 книга4 книга5 кнопкаПраво
кнопка нажата левой кнопкой мыши
кнопкаЛевая книга2 книга3 книга4 book5 book1 buttonВправо
кнопка влево нажата еще раз
кнопка влево Book3 book4 book5 book1 book2 buttonВправо
И то же самое для правой кнопки, I знаю, что могу использовать ChatGPT, но НЕ ИСПОЛЬЗУЮ ЕГО НАМЕРЕННО, ЧТОБЫ НЕ СТАТЬ СТАРШИМ CHATGPT, спасибо всем за внимание

Подробнее здесь: https://stackoverflow.com/questions/793 ... a-carousel