我正在使用 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 函数后,浏览器崩溃了:(
最佳答案
这是一个可以与普通版本的 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();
}
});
}
});
关于jquery - 如何为 bxslider 启用键盘导航?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20377384/