0

I'm using the siema slideshow because it seems super nice and lightweight.

I want the slideshow to play when the user hovers their mouse over, and stop when they leave.

I've got the play bit working - using setInterval() - as per the guide docs, but I can't get the slideshow to stop. I'm trying to kill the interval, but that doesn't seem to work.

Here's my full code

const mySiema = new Siema({
  duration: 250,
  loop: true, // note: this just gets the slideshow to return to the beginning
});

const container = document.querySelector('.siema');

var timer, intervalInSec = 1000;

container.addEventListener('mouseenter', () => setInterval(() => mySiema.next(), intervalInSec));

container.addEventListener('mouseleave', clearInterval(timer));

and heres a codepen for fiddling with.

Towkir
  • 3,889
  • 2
  • 22
  • 41
JorgeLuisBorges
  • 528
  • 3
  • 8
  • 21

1 Answers1

2

You need to assign timer to the output of the setInterval() method.

It (setInterval) returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval()

You also need to call an anonymous function on the mouse leave event to properly call clearInterval(). For example:

container.addEventListener('mouseenter', () => timer = setInterval(() => mySiema.next(), intervalInSec));

container.addEventListener('mouseleave', () => clearInterval(timer));
Andrew Lohr
  • 5,380
  • 1
  • 26
  • 38
  • perfect thanks... so those empty brackets are anonymous functions... I'd tried the first bit actually, but I think that's what I was missing. Thanks. Can accept in 5 minutes – JorgeLuisBorges Oct 27 '17 at 16:26
  • right, you can either put in a name of a function (do not call it with `()`) in the second parameter of `addEventListener`, or execute an anonymous function and put whatever code you want inside it (like we are doing here) – Andrew Lohr Oct 27 '17 at 16:28
  • for those interested here's the fully working codepen, with functions for each to remove the initial delay and to return to the start. https://codepen.io/venncreative/pen/GOKVeW – JorgeLuisBorges Oct 27 '17 at 16:32