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();}
});

score 10 · Accepted Answer · answered Nov 26 '13 at 14:08

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;
   }
});

score 1 · Answer 2 · answered May 20 '15 at 15:51

1

This was added in Version 4.2.2

Entry from change log

Enhancement: Added Keyboard arrow left and right support (#239)

answered May 20 '15 at 15:51

Carlton

5,533
4
54
73

Use arrow keys to control the BXSLIDER

2 Answers2