Use arrow keys to control the BXSLIDER

Question

Can you help me to fix this issue. I was trying to integrate the arrow controls(left & right) to BxSlider when I pressed the next key(right arrow) the last slider image show up which not suppose to show up instead the next slider image then same thing with the previous key(left arrow) when I pressed it the first image show up. Here's the code I'm working with

jQuery('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
nextText: '',
prevText: '',
onSliderLoad: function(){ jQuery('#listing-slider').show();}
});

Answer 1

Here is a way to do this. Hope it helps.

// save slider has a global var
var slider = $('.bxslider').bxSlider({
    // your bxSlider options here...
});
// set keyboard listener
$(document).keydown(function(e){
    if (e.keyCode == 39) // Right arrow 
    {
        slider.goToNextSlide();
        return false;
    }
    else if (e.keyCode == 37) // left arrow
    {
         slider.goToPrevSlide();
        return false;
   }
});