Owl 旋转木马键盘导航

Question

我希望将键盘导航添加到 Owl Carousel 插件。原来的 jQuery 插件的 Github 有一个关于这个主题的帖子 here，所以我尝试了以下方法：

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 版本中它附有一串不断变化的数字，所以我不想碰它。我认为使用 class 不会有什么不同，因为它们都针对主轮播 div.

无论我尝试什么，我都会得到 "undefined is not a function"。

我尝试在可视化编辑器中使用主题的 "raw js" 输入，并编辑插件的源文件。我不确定这是否是特定于 Wordpress 的，或者我是否忽略了一些非常明显的东西。任何见解将不胜感激！

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

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

});

这种方式适合我。

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

});

Owl 旋转木马键盘导航

Owl Carousel Keyboard Navigation

jquery

plugins