Я так расстроен и готов рвать на себе волосы, потому что React, похоже, не хочет быть последовательным, но я знаю, что мне как разработчику чего-то не хватает.
Я работаю над каруселью элементов сзади вперед. Перемещение вперед работает отлично, анимация во всем приятная и чистая. Однако цикл назад (который обычно повторяет те же шаги, что и цикл вперед) не хочет плавной анимации, несмотря ни на что. Вот код карусели:
import useTimeout from "@/lib/hooks/useTimeout"
import { ChevronDown, ChevronUp } from "lucide-react"
import { CSSProperties, MouseEvent, useEffect, useRef, useState } from "react"
export type CarouselItem = {
key: string | number | bigint
title: string
element: React.ReactNode
}
type ForwardCarouselProps = {
containerStyle?: CSSProperties
content: [CarouselItem, CarouselItem, CarouselItem, ...CarouselItem[]] // minimum 3 items CarouselItem array
maxDisplayItems?: number
}
export default function ForwardCarousel({ containerStyle, content, maxDisplayItems } : ForwardCarouselProps) {
const displayCount: number = Math.max(maxDisplayItems || content.length, 3)
const [currentItemIndex, setCurrentItemIndex] = useState(0)
const backwardTimer = useTimeout()
const forwardTimer = useTimeout()
function getPreviousItemIndex() {
return currentItemIndex === 0 ? content.length - 1 : currentItemIndex - 1
}
function getNextItemIndex() {
return currentItemIndex === content.length - 1 ? 0 : currentItemIndex + 1
}
function cycleBackward(event: MouseEvent) {
event.preventDefault()
backwardTimer.begin(50)
setCurrentItemIndex(getPreviousItemIndex())
}
function cycleForward(event: MouseEvent) {
event.preventDefault()
forwardTimer.begin(50)
setCurrentItemIndex(getNextItemIndex())
}
function oneWayCyclicalSlice(arr: ArraySign Up
Log In
)
}
Подробнее здесь: https://stackoverflow.com/questions/798 ... rousel-wha
