Hello sir, very useful video . Can you please brief on approach as to make this a autoplay slideshow , and as user hovers onto the slideshow , it pauses on that instance's picture
Create a state like isHover and set it to true when the user cursor enters the image and false when the user's cursor leaves the image area using "onMouseOver" and "onMouseOut". Create a useEffect, increment the state by one, and pass that state to dependency so that useEffect will run repeatedly. Now add a condition in useEffect if the isHover state is false then only increment the state otherwise don't. Don't forget to add the isHover state to the dependency.
![ค้างคืนโรงเก็บกระสวยอวกาศร้างกลางทะเลทราย [Around The World Ep. 3]](http://i.ytimg.com/vi/E5bWZQhABJE/mqdefault.jpg)
Great video ! And naice images
// adding this line of code just below will auto-mate the slide-show
useEffect(() => {
const timerId = setInterval(() => {
if (active < images.length - 1) {
setActive(active + 1);
}else{
setActive(0);
}
console.log(active)
}, 2500)
return () => {
clearInterval(timerId);
}
},[active])
Hello sir, very useful video . Can you please brief on approach as to make this a autoplay slideshow , and as user hovers onto the slideshow , it pauses on that instance's picture
Yes, sure
Create a state like isHover and set it to true when the user cursor enters the image and false when the user's cursor leaves the image area using "onMouseOver" and "onMouseOut". Create a useEffect, increment the state by one, and pass that state to dependency so that useEffect will run repeatedly. Now add a condition in useEffect if the isHover state is false then only increment the state otherwise don't. Don't forget to add the isHover state to the dependency.
Feel free to correct me if there is some problem in my solution .
Source Code helps for Freshers
Sir please provide Source Code Link in Below
Its there in the description