尝试将键盘导航选项添加到OwlCarousel

Question

默认情况下，无法使用键盘移动OwlCarousel幻灯片。我使用此代码添加功能但返回错误。

var owl = $('#carousel-div-id').data('owlCarousel');
$(document.documentElement).keyup(function(event) {
// handle cursor keys
if (event.keyCode == 37) {
    owl.prev();
} else if (event.keyCode == 39) {
    owl.next();
}
});

错误如下

  

未捕获的ReferenceError：未定义owl

Answer 1

回答我自己的问题。那些想要为OwlCarousel添加键盘功能的人可以使用以下方法。

//Usual Owlcarousel code.
$(document).ready(function() {
   var owl = $("#owl-example");
   owl.owlCarousel({
       pagination: true
   });

//Following code would do the trick.
 $(document.documentElement).keyup(function (event) {
   if (event.keyCode == 37) {
       owl.trigger('owl.prev');
   } 
   else if (event.keyCode == 39) {
        owl.trigger('owl.next');
   }

 });
});

<强>更新

owl.trigger('owl.prev'), owl.trigger('owl.next')不适用于Owl Carousel 2.相反，请使用

 owl.trigger('next.owl.carousel');

和

owl.trigger('prev.owl.carousel');