默认情况下，试图添加键盘导航选项到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(); 
} 
}); 

的错误如下

Uncaught ReferenceError: owl is not defined

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

}); 
}); 

UPDATE

owl.trigger('owl.prev'), owl.trigger('owl.next')不会与猫头鹰旋转木马的工作2.相反，请使用

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

和

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