The answers about stop
are good, but you have a bigger issue that is causing the described behavior. The issue is here:
$("#slider, .arrows").hover(function() {
stopLoop()
}, function() {
startSlider()
});
You have bound this to the .arrows
as well as the #slider
and the arrows are contained within the slider. So, when you mouse out of an arrow and then out of the entire slider, you are calling start
twice in a row without calling stop
between. You can see this if you hover onto the arrow and then off of the slider multiple times in a row. The slides will change many times after 6 seconds.
Similarly, consider the case of a single click:
Enter the `#slider` [stopLoop]
Enter the `.arrows` [stopLoop]
Click the arrow [stopLoop]
[startSlider]
Leave the `.arrows` [startSlider]
Leave the `#slider` [startSlider]
As you can see from this sequence of events, startSlider
is called 3 times in a row without calling stopLoop
inbetween. The result is 3 intervals created, 2 of which will not be stopped the next time stopLoop
is called.
You should just have this hover
on the #slider
and more importantly, add a call to stopLoop
as the first step in startSlider
. That will ensure that the interval is always cleared before creating a new one.
$("#slider").hover(function() {
stopLoop()
}, function() {
startSlider()
});
function startSlider(){
stopLoop();
/* start the slider */
}