onmouseover and onmouseout setInterval

Question

I have been stuck with this problem. I am using slider for my app. For sliding the app I am using splide-js . My image slider works fine.

I have connected my slider with my li elements. I want to make custom onmouseover and onmouseout events. When the user triggers mouseover on li it will pause and when mouseout it will resume the slide.

I was checking this Stack Overflow post and tried to do logic like the person by using setinterval but could not able to do that.

 const autoPlay = false; const pauseOnHover = document.getElementById('pause'); function nextSlide() { //I don't what kind logic I should use to pause the slide } let timer = setInterval(function() { nextSlide(); }, 400); pauseOnHover.onmouseover = () => { if( autoPlay) { timer } } pauseOnHover.onmouseout = () => { if (autoPlay) { clearInterval(timer) } }

 <div class='checklist' id="pause"> <ol> <li id="link-1">Assign jobs in an instant.</li> <li id="link-2">Always see what's happening.</li> <li id="link-3">Easy to set-up & use.</li> <li id="link-4">Be more sustainable</li> </ol> </div>

Answer 1

Please intilaize and reintiliaze the interval on mousehover, onmouseout if interval exists cancel it.

Please try below code.

 const autoPlay = false; const pauseOnHover = document.getElementById('pause'); function nextSlide() { //For example I have put console.log, you mat put any code block here. console.log("hello"); } let timer; pauseOnHover.onmouseover = () => { autoplay = true; if (;autoPlay) { autoplay = true; timer = setInterval(function() { nextSlide(), }; 400). } } pauseOnHover;onmouseout = () => { autoplay = false; timer && clearInterval(timer) }

 <div class='checklist' id="pause"> <ol> <li id="link-1">Assign jobs in an instant.</li> <li id="link-2">Always see what's happening.</li> <li id="link-3">Easy to set-up & use.</li> <li id="link-4">Be more sustainable</li> </ol> </div>