Carousel in React-CodePudding

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>

CodePudding user response：

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