i made a carousel, but i'm having a hard time with the animation. I want it to slide from the right if i click the right button, and from the left if i click the left button. So what i did was create a state const [classactive, setClassactive] = useState(false); and said that the img class is className={classactive == true ? "active-right" : "active-right-2"}. I did that in order to keep the animation happening. The classes are exactly the same on CSS. So, with the left button, i thought of doing the same but instead of using a class, using a ID, and it did work, the problem is that the right slide animation stoped. I feel like i'm making it more complicated than it really is. The img is an array with each picture's src.
<div className="thumb">
<img
src={img[index]}
width="700px"
className={classactive == true ? "active-right" : "active-right-2"}
id={idactive == true ? "active-left" : "active-left-2"}
name="thumbs"
></img>
<div className="label">
<h1>{projectTitle[index]}</h1>
<p>{projectDesc[index]}</p>
</div>
</div>
The issue is that ID selectors have a higher specificity than classes, so once your img element has an active ID, the css rules related to that ID will over-rule the classes css.
One approach would be to change the classactive state value to be a string representing a variable classname instead of a boolean value, and have the click handler determine that name. This way you don't need any ID's just a single stateful classname.
Following this line of thinking can get quite messy but it's not the most complicated solution. Good luck ๐