我想在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版本中,它有一系列不断变化的数字,所以我不想碰它。我不认为使用这个类会有什么不同,因为它们都针对主转盘分区。
无论我尝试什么,我都会得到一个"未定义的不是函数"。
我尝试过在visualcomposer中使用主题的"原始js"输入,并编辑插件的源文件。我不确定这是Wordpress特有的,还是我忽略了一些非常明显的东西。任何见解都将不胜感激!
我在这里使用旋转木马:http://hammacklawfirm.com/wp/about-paul/
尝试将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');
}
});
这样对我有效。
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]);
}
});
});