默認情況下，試圖添加鍵盤導航選項到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');