I'm trying to make a random slide show using react hooks and set interval. How can I make a transition/ animation between the images?
thank you!
const imgArray = [img1, img2,img3,img4]
const [slideImg, setSlideImg] = useState(imgArray[utilService.getRandIntInclusive(0, imgArray.length - 1)])
useEffect(() => {
const intervalId = setInterval(() => {
setSlideImg(imgArray[utilService.getRandIntInclusive(0, imgArray.length - 1)])
}, 3000)
return function cleanup() {
clearInterval(intervalId)
}
})
return (
<section className='filter flex'>
<img src={slideImg} alt="" ></img>
</section >)
}
You can add transition styles to the section.
Example
.flex {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
.flex img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.flex img.top:hover {
opacity:0;
}