Implement autoplay, pause on hover, keyboard control on slideshow

Question

I am trying to implement this sideshow on a project, and I want to add some features :

• Auto-play
• Pause on hover
• Multiple instance of the slider
• Go to next slide with keyboard arrow keys

What I have tried ?

I have added this code

        var autoscroll = window.setInterval(function(){ navigate( 'next' )}, 5000);

    component.onmouseover = function(e){
        autoscroll = clearInterval(autoscroll);
        console.log('onmouseover');
    };
    component.onmouseout = function(e) {
            clearInterval(autoscroll);
            var autoscroll = setInterval(function() {navigate( 'next' )}, 5000);
            console.log('onmouseout');
    };

Live Demo: http://jsfiddle.net/M2CwF/1/

What is the problem ?

• The autoplay works fine until we manually use the control arrow, I see that the interval will change in this case, maybe I need to add a condition like if( isAnimating ) return false;

• The pause on hover does not seems to work, and from the console log I see that the event is fired several times in just one single hover !

• If I have multiple instance of the slider only the first one works

• The keyboard keys to pass to next slide

  Thank you for you help.

Answer 1

The problem with how you were handling the mouseover and mouseout was that you were redefining the global autoscroll variable instead of changing its value in the mouseout event.

Changing that and some relatively simple keydown event code fixed up the slideshow to do what you want (I think).

The changes I made to the mouseover/mouseout code:

var autoscroll = window.setInterval(function(){ navigate( 'next' )}, 5000);

        component.onmouseover = function(e){
            autoscroll = clearInterval(autoscroll);
            console.log('onmouseover');
        };
        component.onmouseout = function(e) {
                clearInterval(autoscroll);
                autoscroll = setInterval(function() {navigate( 'next' )}, 5000);
                console.log('onmouseout');
        };

And here's the code for the arrow key events:

document.onkeydown = function(event) {
    event = event || window.event;
    switch (event.keyCode || event.which) {
        case 37:
            clearInterval(autoscroll);
            navigate( 'prev' );
            autoscroll = setInterval(function() {navigate( 'next' )}, 5000);
            break;
        case 39:
            clearInterval(autoscroll);
            navigate( 'next' );
            autoscroll = setInterval(function() {navigate( 'next' )}, 5000);
            break;
    }
};

Here's what I came up with: http://jsfiddle.net/M2CwF/2/

Update

Here's a version that supports multiple slideshows per page. I eliminated the left and right arrow actions though because I'm not sure how you would want to handle navigating multiple slideshows on one page...

It shouldn't be hard to modify the code to make that happen though.

http://jsfiddle.net/M2CwF/5/