Hice un carrusel, pero estoy teniendo problemas con la animación. Quiero que se deslice desde la derecha si hago clic en el botón derecho y desde la izquierda si hago clic en el botón izquierdo. Entonces, lo que hice fue crear un estado const [classactive, setClassactive] = useState(false); y dijo que la clase img es className={classactive == true ? "active-right" : "active-right-2"} . Lo hice para que la animación siguiera funcionando. Las clases son exactamente iguales en CSS. Entonces, con el botón izquierdo, pensé en hacer lo mismo, pero en lugar de usar una clase, usar una ID, y funcionó, el problema es que la animación de la diapositiva derecha se detuvo. Siento que lo estoy haciendo más complicado de lo que realmente es. El img es una matriz con el src de cada imagen.
<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>El problema es que los selectores de ID tienen una mayor especificidad que las clases, por lo que una vez que su elemento img tiene una ID activa, las reglas CSS relacionadas con esa ID anularán las clases CSS.
Un enfoque sería cambiar el valor del estado classactive para que sea una cadena que represente un nombre de clase variable en lugar de un valor booleano, y hacer que el controlador de clics determine ese nombre. De esta manera, no necesita ningún ID, solo un único nombre de clase con estado.
Seguir esta línea de pensamiento puede ser bastante confuso, pero no es la solución más complicada. Buena suerte 👍