Мне нужно реализовать бесконечную смену картинок, но чтобы при смене они переворачивались, как это лучше сделать? То что сейчас у меня есть работает не совсем правильно. Что мне нужно изменить в моем коде. Только начал изучать анимацию
JS Сделал слайдер чтобы картинки менялись через 5 сек
const [activeIndex, setActiveIndex] = useState<number>(0);
const img = [
<img key={orden1} src={orden1} />,
<img key={orden2} src={orden2} />,
<img key={orden3} src={orden3} />,
<img key={orden4} src={orden4} />,
<img key={orden5} src={orden5} />,
<img key={orden6} src={orden6} />,
<img key={orden7} src={orden7} />
]
useEffect(() => {
const interval = setInterval(() => {
setActiveIndex((current) => {
const res = current === img.length - 1 ? 0 : current + 1
return res
})
}, 5000)
return () => clearInterval(interval)
}, [])
// Вычисляем индекс следующего слайда
const nextImgIndex = activeIndex === img.length - 1 ? 0 : activeIndex + 1
HTML У меня есть карточка с картинками с двух сторон
<div className={s.slider}>
<div className={s.sliderImg} key={activeIndex}>
<div className={s.front}>{img[activeIndex]}</div>
<div className={s.back}>{img[nextImgIndex]}</div>
</div>
</div>
CSS Картинки переворачиваются но это работает не правильно
.slider {
position: absolute;
top: 348px;
left: 776px;
width: 395px;
height: 400px;
margin: auto;
box-sizing: border-box;
display: flex;
align-items: center;
overflow: hidden;
perspective: 1000;
}
.sliderImg {
position: absolute;
width: 100%;
height: 100%;
transition: all 0.6s;
transform-style: preserve-3d;
}
.slider:hover .sliderImg {
transform: rotateY(180deg);
}
.sliderImg img {
width: 100%;
height: 100%;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg);
}