jquery - 如何为 bxslider 启用键盘导航？

Question

我正在使用 bxslider 并添加了两个名为 #slider-next 和 #slider-prev 的按钮。鼠标单击事件工作得很好 - 当单击下一张幻灯片时，我的所有其他代码都会被执行。但我想用键盘箭头浏览幻灯片。那可能吗？如果是，怎么办？我尝试过:

/* enable keyboard navigation */ 
        $(document).keyup(function (e) {
                if (e.keyCode == 37) { //left arrow
                    $( "#slider-prev" ).click(); 
                }
                if (e.keyCode == 39) { //right arrow
                    $( "#slider-next" ).click(); 
                }
         }); 

我的 slider 上一个和 slider 下一个单击功能的所有其他代码都已执行，但幻灯片的下一张或上一张图片没有出现。我错过了什么吗？

编辑:我又翻了一遍bxslider的纪录片，发现:

goToNextSlide Performs a "Next" slide transition

example: slider = $('.bxslider').bxSlider(); slider.goToNextSlide();

goToPrevSlide Performs a "Prev" slide transition

example: slider = $('.bxslider').bxSlider(); slider.goToPrevSlide();

但是修改我的 keyup 函数后，浏览器崩溃了:(

Answer 1

这是一个可以与普通版本的 bxSlider 一起使用的示例:

    var slider = $("#yourSliderIDHere");

    slider.bxSlider({
      adaptiveHeight: true, // not needed for keyboard navigation, just for example
      onSliderLoad: function() {

          $("body").keydown(function(e) {
              if (e.keyCode == 37) { // left
                slider.goToPrevSlide();
              } else if(e.keyCode == 39) { // right
                slider.goToNextSlide();
              }
            });

      }
    });