Question

我们目前有多个BX Sliders，而不是复制JS功能并减慢网站速度，我们已设法使用下面的代码段运行所有内容。

我们似乎无法使用多个滑块允许用户使用键盘上的↑和↓键（滑动幻灯片图像）。我们设法在多次复制原始函数时执行此操作，但未使用下面的缩短版本。

如果有人设法解决这个问题，请告诉我们。谢谢。

var sliderid = $.each($("ul.slides-container > li ul.ss"), function(){$(this).attr("id");});

sliderid.bxSlider({
            adaptiveHeight: true, 
            onSliderLoad: function() {
                $("body").keydown(function(e) {
                    if (e.keyCode == 40) { 
                        sliderid.goToPrevSlide();
                    } else if(e.keyCode == 38) { 
                         sliderid.goToNextSlide();
                    }
                });
            }
        });

Live URL

Answer 1

您可以尝试定位onSliderLoad函数中的单个滑块，而不是包含所有滑块的变量，如下所示：

$('ul.slides-container > li ul.ss').each(function(){
    var slider = $(this).bxSlider({
        adaptiveHeight: true, 
        onSliderLoad: function(){
            $('body').keydown(function(e){
                e.preventDefault(); // stop default page scroll

                if (e.keyCode == 40){ 
                    slider.goToPrevSlide();
                }
                else if (e.keyCode == 38){ 
                    slider.goToNextSlide();
                }
            });
        }
    });
});

示例JSFiddle。

我希望这有帮助！

多个带键控制的BXSliders

1 个答案: