猫头鹰走马灯键盘导航

Question

我希望为Owl Carousel插件添加键盘导航功能。原始的jQuery插件在Github上有一个关于此主题的讨论线程（链接），因此我尝试了以下方法：

var owl = $('.owl-carousel');

$(document.documentElement).keyup(function(event) {
if (event.keyCode == 37) {
    owl.prev();
} else if (event.keyCode == 39) {
    owl.next();
}
});

其他人使用 #owl-carousel 作为选择器，但在 WordPress 版本中，它附带了一串不断变化的数字，所以我不想碰它。我认为使用类也不会有什么区别，因为它们都针对主轮播图 div。

无论我尝试什么，都会得到“未定义的函数”错误。

我尝试使用我的主题中的“原始 js”输入和编辑插件的源文件。我不确定这是否是特定于 WordPress 的问题，还是我忽略了非常明显的东西。任何见解都将不胜感激！

我在这里使用轮播图： http://hammacklawfirm.com/wp/about-paul/

- char

---

首先：您确定您的脚本是在猫头鹰走马灯脚本加载之前执行的吗？我看到您将代码放置在站点的页眉中，但我无法看到猫头鹰走马灯脚本加载的位置。 - cristian.raiber

非常有见地，感谢您的回复。我使用的主题似乎会将 Visual Composer 中的任何“原始 JS”放入 head 中，这就是为什么我尝试编辑插件文件而不是主题文件。@Leroy99的建议解决了问题。 - char

Answer 1

试着把你的 owl 变量放在函数内部，类似这样：

jQuery(document.documentElement).keyup(function (event) {    

    var owl = jQuery(".owl-carousel");

    // handle cursor keys
    if (event.keyCode == 37) {
       // go left
       owl.trigger('owl.prev');
    } else if (event.keyCode == 39) {
       // go right
       owl.trigger('owl.next');
    }

});

这种方式对我有效。

- Leroy99

---

在最新的 Owl 版本中，正确的触发器是 prev.owl 和 next.owl。 (链接) - juzraai

我需要在我的 Owl Carousel 版本中触发 "next.owl.carousel" 和 "prev.owl.carousel"。其他人可能也需要这样做。 - Art Geigel

如何使幻灯片仅在用户查看滑块时移动，目前当用户在页面的任何其他位置按键向上或向下时，幻灯片将移动？ - Srikanth Koneru

我不得不稍微调整一下并使用 owl.find('.owl-prev').click(); ，但还是谢谢！ :) - nsilva

Answer 2

Din的答案让我朝着正确的方向开始了，但看起来Owl改变了Events的语法：owl.prev和owl.next对我不起作用。然而下面这个可以：

$(document).ready(function() {

    var owl = $('.owl-carousel');
    owl.owlCarousel({
        loop:true,
        margin:10,
    });

    /*keyboard navigation*/
    $(document.documentElement).keyup(function(event) {    
        if (event.keyCode == 37) { /*left key*/
            owl.trigger('prev.owl.carousel', [700]);
        } else if (event.keyCode == 39) { /*right key*/
            owl.trigger('next.owl.carousel', [700]);
        }
    });

});

- RJR