Изучаю Next.JS, занялся анимацией, есть пару вопросов, которые не могу решить. Задача сделать бесконечный не интерактивный слайдер иконок криптовалюты, бесконечность и анимацию прокрутки мне вроде бы удалось реализовать, но я думаю можно лучше. Застрял на добавлении класса первому элементу, первый элементы долежн быть выделен более ярким бекграундом и величиной иконки. Первый элемент должен анимировано скинуть класс main и уйти за предел видимости пользователя, а второй элемент должен стать анимировано на его место и получить класс main. Бесконечная прокрутка работает, а вот как реализовать добавление классов в pages я нигде не найду.
Так же есть вопрос по key, сыпет в консоль предупреждение, что кей не уникален в самом последнем return. Во-первых, я не пойму зачем там key, во-вторых, я не пойму как это пофиксить.
Еще очень интересует момент как выключить двойной вызов setTimeout в dev mode
import { StyledCardList, StyledSecondaryCard } from './styled'
import React from "react";
import { useState, useEffect } from "react";
import cardDetails from "./swiperconfig"
const TRANSITION_DURATION = 1500;
export const Carousel = () => {
const [pages, setPages] = useState([])
const [offset, setOffset] = useState(0)
const [transitionDuration, setTransitionDuration] = useState(TRANSITION_DURATION)
const handleTransitionEnd = () => {
setOffset(0);
setTransitionDuration(0);
console.log(offset)
}
useEffect(() => {
if (transitionDuration === 0) {
setTimeout(() => {
setTransitionDuration(TRANSITION_DURATION)
}, TRANSITION_DURATION)
}
}, [transitionDuration])
useEffect(() => {
setTimeout(() => {
setOffset((currentOffset) => {
const newOffset = currentOffset - 30;
console.log(pages);
pages[1] = () => {
return(
<StyledSecondaryCard key={cardDetails.id} className="card">
<img key={cardDetails.id} className="image" src={cardDetails.imgUrl} alt={cardDetails.alt} />
</StyledSecondaryCard>
)
}
return (newOffset);
})
}, 5000)
pages.push(pages[0]);
pages.shift(pages[0]);
if (offset != 0){
setTimeout(() => {
setTransitionDuration(0)
setOffset(0)
}, 15000)
}
}
)
useEffect(() => {
let curr = -1;
setPages(
cardDetails.map(() => {
curr++;
if (curr == 1){
return (
<StyledSecondaryCard key={cardDetails.id} className="card main">
<img key={cardDetails.id} className="image" src={cardDetails.imgUrl} alt={cardDetails.alt} />
</StyledSecondaryCard>
)
}
else{
return(
<StyledSecondaryCard key={cardDetails.id} className="card">
<img key={cardDetails.id} className="image" src={cardDetails.imgUrl} alt={cardDetails.alt} />
</StyledSecondaryCard>
)
}
})
)
}, [])
// useEffect(() => {
// },[])
let data = new Date();
return (
<div style={{maxWidth: '710px', overflow: 'hidden'}}>
<StyledCardList key={offset * data} className="cardList" sx={{
marginLeft: "-50px",
transform: `translateX(${offset}px)`,
transitionDuration: `${transitionDuration}ms`
}} onTransitionEnd={handleTransitionEnd} onTransitionEndCapture={handleTransitionEnd}>
{pages}
</StyledCardList>
</div>
)