Как CSS анимировать карусель, сделанную вручную? ⇐ Html

[Anonymous]

Я работаю над компонентом горизонтальной карусели, созданным вручную в React, но изо всех сил пытаюсь создать анимацию для перемещения карусели при нажатии на соответствующее изображение шеврона.
У вас есть идеи, как это сделать?
Это мой компонент.tsx?

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

import { useState } from 'react'

// Styles
import './Carousel.component.style.css'

// Assets
import leftsideChevron from '../../assets/images/LeftsideChevron.svg'
import rightsideChevron from '../../assets/images/RightsideChevron.svg'

const CarouselComponent = ({
itemsList,
}: {
itemsList: {
title: string
image: string
}[]
}) => {
const [currentIndex, setCurrentIndex] = useState(0)
const aux = 4

const onLeftClick = () => {
if (currentIndex === 0) {
return
}
console.log('currentIndex (left): ' + currentIndex)

if (currentIndex = 0) {
setCurrentIndex((value) => Math.max(0, value - aux))
}
}

const onRightClick = () => {
if (currentIndex === itemsList.length) {
return
}
console.log('currentIndex (right): ' + currentIndex)

if (currentIndex + aux >= itemsList.length) {
setCurrentIndex(itemsList.length)
return
}

setCurrentIndex((value) =>
Math.min(value + aux, Math.max(0, itemsList.length - aux)),
)
}

return (

[img]{leftsideChevron}


{itemsList.map((item, id) => {
return (

[img]{item.image}

{item.title}

)
})}

[img]{rightsideChevron}


)
}

export default CarouselComponent

А это мой CSS-файл:

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

@import '../../assets/globals.css';

.carouselContainer {
display: flex;
justify-content: space-between;
padding-top: 1em;
}

.itemsListContainer {
display: flex;
flex: 1 0 20%;
overflow-x: auto;
overflow: hidden;
padding: 1em 0;
scroll-snap-type: x mandatory;
}

.itemContainer {
border-radius: 1em;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
display: flex;
gap: 1em;
justify-content: center;
margin: 0.2em 1em;
min-width: 20%;
scroll-margin-left: 1em;
scroll-snap-align: start;
max-width: 25%;
}

.itemContainer img {
height: auto;
width: 2.43rem;
}

.itemContainer p {
font-family: Montserrat-Bold;
font-size: 1.5rem;
}

.carouselRightsideChevron:hover,
.carouselLeftsideChevron:hover {
cursor: pointer;
}

Вот снимок экрана компонента на экране:



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