Soy bastante nuevo en javascript y estoy tratando de crear una presentación de diapositivas/carrusel automático que muestre imágenes. Encontré cómo crear una presentación de diapositivas automática donde cada diapositiva es un color, pero estoy luchando para que muestre una imagen. A continuación, he incluido lo que tengo hasta ahora. Realmente agradecería cualquier ayuda o consejo sobre cómo hacer que esto funcione.

 import React, {useState, useEffect} from 'react'; import C1 from './CarouselData'; //import {image} from './CarouselData'; //importBackIosIcon from @material-ui/icons/ArrowBackIos'// const image = ["C1", "#00C49F", "#FFBB28"]; const delay = 3000; export default function Carousel () { const [index, setIndex] = React.useState(0); const timeoutRef = React.useRef(null); function resetTimeout() { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } } React.useEffect(() => { resetTimeout(); timeoutRef.current = setTimeout( () => setIndex((prevIndex) => prevIndex === image.length - 1 ? 0 : prevIndex + 1 ), delay ); return () => { resetTimeout(); }; }, [index]); return ( <div className="slideshow"> <div className="slideshowSlider" style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }} > {image.map((background, index) => ( <div className="slide" key={index} style={{ background}} ></div> ))} </div> <div className="slideshowDots"> {image.map((_, idx) => ( <div key={idx} className={`slideshowDot${index === idx ? " active" : ""}`} onClick={() => { setIndex(idx); }} ></div> ))} </div> </div> ); }

CarruselData.js

 import C1 from '../carousel-images/carousel-1.jpg'; import C2 from '../carousel-images/carousel-2.jpg'; import C3 from '../carousel-images/carousel-3.jpg'; export const image = [C1, C2, C3];