Движущаяся картинка в виде карусели [закрыто] ⇐ 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



);

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

Итак, вот мой MainPage.css

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

#bannerBooks {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}

.book-container {
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 0.5;
transform: translateX(10px);
}

.book-container.active {
opacity: 1;
transform: scale(1);
}

.book-container.inactive {
opacity: 0.5;
transform: scale(0.8);
}

.left-button-container, .right-button-container {
display: flex;
align-items: center;
}

.left-button {
position: absolute;
left: 50px;
top: 600px;
}

.right-button {
position: absolute;
right: 50px;
top: 600px;
}

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

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