Расчет смещения для центрального центра в карусели ⇐ Javascript

[Anonymous]

Я работаю над этой каруселем React x Motion, которая приносит карту в центр экрана, когда она была нажата, в зависимости от его индекса. Тем не менее, карты, кажется, размещаются только в начале списка каруселей.

Вот код ниже. < /P>
import { motion } from "motion/react";
import { useState } from "react";

const carouselImages = [
"../img-11.jpg",
"../img-2.jpg",
"../img-13.jpg",
"../img-4.jpg",
"../img-15.jpg",
"../img-1.jpg",
"../img-19.jpg",
"../img-3.jpg",
"../img-14.jpg",
"../img-5.jpg",
];

export default function StaggerCarousel() {
const [selectedIndex, setSelectedIndex] = useState(0);

const handleOnClick = (e) => {
const clickedItem = e.currentTarget;
const clickedIndex = Array.from(clickedItem.parentNode.children).indexOf(
clickedItem
);
setSelectedIndex(clickedIndex);
};

return (


{carouselImages.map((img, index) => {
return (

);
})}


);
}
< /code>
Я могу визуализировать, что расчет будет зависеть от прогибы окна и продовольствия Ittember, и я попробовал что -то подобное, но он не дает точного результата. < /p>

const itemWidth = 208;

const windowWidth = window.innerWidth / 2;

const offsetX = windowWidth + itemWidth / 2 - selectedIndex * itemWidth;
console.log(offsetX);


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