Я работаю над этой каруселем 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
