For my small personal project, I am using ReactJs and Tailwind to render a list of 6 images. Here is the code snippet:
import React from "react";
import Images from "../images";
export default function PictureHeader() {
const [pictureIndex, setPictureIndex] = React.useState(0);
const animationRef = React.useRef<HTMLDivElement>(null);
const node = animationRef.current;
const pictures: string[] = Images.pictures;
const removeAnimation = () => {
node?.className.includes("fade-out")
? node.className.replace("fade-out", "fade-in")
: node?.className.concat(" fade-in");
}
React.useEffect(() => {
removeAnimation();
setInterval(() => {
nextPicture();
}, 2500);
});
const nextPicture = () => {
const newIndex = (pictureIndex + 1) % pictures.length;
setPictureIndex(newIndex);
node?.className.replace("fade-in", "fade-out");
}
console.log(pictureIndex);
return (
<div className="padding-10 top-0 inset-x-0 place-content-center">
<div className="w-4/5 select-none relative rounded-lg">
<div ref={animationRef} className="absolute content-left aspect-w-16 aspect-h-9 cover z-0">
<img src={pictures[pictureIndex]} />
</div>
<div className="absolute inset-x-0 bottom-0 justify-items-center z-10">
<h1 className="6xl font-dancing">
Sierra and Adam
</h1>
<h2 className="4xl font-dancing">
Save the date for a match of the Millenia!
</h2>
</div>
</div>
</div>
);
}
However, when the page runs, the images are displayed in a strange pattern like this: 0,0,1,1,0,0,1,1,2,2,0,0,1,1,2,2,3,3... which could be unsettling for users. Is there something I am missing or doing wrong in my implementation? Any assistance would be greatly appreciated!