jQuery SlidesJS keyboard navigation

Question

My site uses SlidesJS for a photo slideshow.

My question is, how can I use keyboard navigation?

I've added this GitHub solution to my head tag (lines 94-116) but the keyboard's left & right arrow keys still aren't working.

How can I fix this?

Answer 1

I input the following code into the console window on chrome when on the SlidesJS site and it worked...

(function($){
    $(window).keyup(function(e){
        var key = e.which | e.keyCode;
        if(key === 37){ // 37 is left arrow
            $('a.prev').click();
        }
        else if(key === 39){ // 39 is right arrow
            $('a.next').click();
        }
    });
})(jQuery);

Edited for compatibility with pages that don't normally use $ for jQuery.

Answer 2

You can bind the keyup events to the window context and fire the click event on the next and prev buttons based on event.keyCode

jQuery(window).bind("keyup", function(e){
    if(e.keyCode === 37) {
        jQuery(".prev").click();
    } else if (e.keyCode === 39) {
        jQuery(".next").click(); 
    }
});

There should be some code in there to change the thumbs but that's the basic functionality off the top of my head.