CODEWITHSUNDEEP
jqueryslideshowkeyboard-navigation
Ryan
Ryan

Reputation: 6217

jQuery SlidesJS keyboard navigation

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?

Upvotes: 2

Views: 2364

Answers (2)

gislikonrad
gislikonrad

Reputation: 3581

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.

Upvotes: 6

Joseph Marikle
Joseph Marikle

Reputation: 78520

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.

Upvotes: 2

Related Questions