import React,{useState} from 'react' import { sliderData } from './sliderData' import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; import "./SlideShow.css" export default function SlideShow() { const [currentImg,setCurrentImg]=useState(0) return ( <div > <h3>SlideShow</h3> <div className="slideshow" > <div className="slider" style= {{backgroundImage:`url(${sliderData[currentImg].image})`}}> <div className="left"><ArrowBackIosIcon onClick={()=>{currentImg>0 && setCurrentImg(currentImg-1)}}/></div> <div className="center"></div> <div className="right"><ArrowForwardIosIcon onClick={()=>{ currentImg<sliderData.length-1 && setCurrentImg(currentImg+1)}}/></div> </div> </div> </div> ) }Quiero hacer que esta presentación de diapositivas se mueva automáticamente y pausar la presentación de diapositivas al pasar el mouse. No debería contraerse en la última imagen
import React,{useState,useEffect} from 'react' import { sliderData } from './sliderData' import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; import "./SlideShow.css" export default function SlideShow() { const [currentImg,setCurrentImg]=useState(0) const [hovered,setHovered]=useState(false) useEffect(() => { if(!hovered ){ const interval=setTimeout(() => { const newSlideIndex= currentImg>=sliderData.length-1 ?0:currentImg+1; setCurrentImg(newSlideIndex ); }, 1000); return(() => { }) } }, [currentImg]) return ( <div > <h3>SlideShow</h3> <div className="slideshow" > <div className="slider" onMouseOver={()=>setHovered(true)} style= {{backgroundImage:`url(${sliderData[currentImg].image})`}}> <div className="left"><ArrowBackIosIcon onClick={()=> {currentImg>0 && setCurrentImg(currentImg-1)}}/> </div> <div className="center"></div> <div className="right" ><ArrowForwardIosIcon onClick={()=>{ currentImg<sliderData.length-1 && setCurrentImg(currentImg+1)}}/></div> </div> </div> </div> ) }Esto se está deteniendo al pasar el mouse pero no continuó deslizándose después de pasar el mouse por encima