Wie kann man ein handgefertigtes Karussell per CSS animieren? ⇐ CSS

[Anonymous]

Ich arbeite an einer handgefertigten horizontalen Karussellkomponente von React, aber es fällt mir schwer, eine Animation zu erstellen, um das Karussell zu verschieben, wenn ich auf das entsprechende Chevron-Bild klicke.
Haben Sie eine Idee, wie das geht?
Das ist meine Component.tsx?

Code: Select all

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

Und das ist meine CSS-Datei:

Code: Select all

@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;
}

Hier ist ein Screenshot für die Komponente auf dem Bildschirm:



Was ich bisher versucht habe, ist, meinen Code zu aktualisieren, um dies auszuprobieren:

Code: Select all

const onLeftClick = () => {
setCurrentIndex((prev) => Math.max(prev - aux, 0))
}

const onRightClick = () =>  {
setCurrentIndex((prev) =>
Math.min(prev + aux, itemsList.length - aux)
)
}
...


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

[img]{item.image} /[/img]
{item.title}

))}

In Kombination mit diesem CSS:

Code: Select all

.itemsViewport {
overflow: hidden;
width: 100%;
}

.itemsListContainer {
display: flex;
transition: transform 0.4s ease-in-out;
}

.itemContainer {
flex: 0 0 25%;
text-align: center;
}

Dies war keine Lösung für meine Situation, da mein Überlauf-X nicht ganz am Ende der Karussellelemente einrastete. Es landete irgendwo in der Nähe von 60 % der Gesamtbreite des Überlaufs x.