Estoy usando datos ficticios y alguna lógica de control deslizante a la que hice referencia en un video para un componente de control deslizante que simplemente cambia entre dos imágenes por ahora.

Aquí está elenlace de codesandbox si facilita las cosas.

 import { useState } from "react"; import { Flex, Box, Text, Image } from "@chakra-ui/react"; import styles from "./works.module.scss"; const Works = () => { const [currentSlide, setCurrentSlide] = useState(0); const data = [ { id: "0", text: "In Progress..", img: "https://www.marketplace.org/wp-content/uploads/2019/08/Fake-twitter.jpg?w=1200", }, { id: "1", text: "Coming Soon..", img: "https://www.desktopbackground.org/download/1920x1080/2011/05/16/204237_grey-gaussian-blur-wallpaper-jpg_1920x1200_h.jpg", }, ]; const length = data.length; const nextSlide = (length) => { setCurrentSlide(currentSlide === length - 1 ? 0 : currentSlide + 1); }; const prevSlide = () => { setCurrentSlide(currentSlide === 0 ? length - 1 : currentSlide - 1); }; return ( <Flex justify="center" m="50px"> <Image src="assets/arrow2.png" w="50px" h="50px" alt="" onClick={() => prevSlide(length)} className={styles.left} /> <Box borderRadius="20px" w="500px" h="500px" bg="black"> {data.map((d, index) => ( <Flex className={ index === currentSlide ? styles["slide active"] : styles.slide } m="20px" h="80%" > {index === currentSlide && ( <Image className={styles.img} src={d.img} alt={d.text} w="100%" h="100%" /> )} </Flex> ))} </Box> <Image src="assets/arrow2.png" alt="" w="50px" h="50px" onClick={() => nextSlide(length)} className={styles.right} /> </Flex> ); }; export default Works;

Sin embargo, me parece que el estilo slides.active no se aplica por alguna razón. ¿Alguien tiene alguna idea de por qué esto no funciona correctamente? ¡¡Gracias!!