使用ReactJS进行猫头鹰旋转木马键盘导航

Question

我正在尝试做滑块，用户可以通过键盘的左右箭头进行导航
stackoverflow我最近读到这个问题，但猫头鹰转盘的架构似乎已经改变了。

import React from "react";
import OwlCarousel from "react-owl-carousel";
import "owl.carousel/dist/assets/owl.carousel.min.css";
import "owl.carousel/dist/assets/owl.theme.default.min.css";
function App() {
document.body.addEventListener("keydown", (event) => {
const owl = document.querySelector(".owl-theme");
console.log(event.keyCode);
if (event.keyCode === 37) {
/*left key*/
//How can I trigger prev button???
} else if (event.keyCode === 39) {
/*right key*/
//How can I trigger  the next button?
}
});
return (
<>
<OwlCarousel
item="3"
nav
autoplay
className="owl-carousel owl-theme owl-loaded"
>
<div className="item">hi</div>
<div className="item">hi</div>
<div className="item">hi</div>
<div className="item">hi</div>
<div className="item">hi</div>
<div className="item">hi</div>
<div className="item">hi</div>
<div className="item">hi</div>
<div className="item">hi</div>
</OwlCarousel>
</>
);
}
export default App;

Answer 1

首先，您必须设置将找到您的转盘的变量：

var owl = $('.owl-carousel');

然后以这种方式调用触发器：

// Go to the next item
$('.customNextBtn').click(function() {
owl.trigger('next.owl.carousel');
});
// Go to the previous item
$('.customPrevBtn').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
owl.trigger('prev.owl.carousel', [300]);
});

有关触发器的更多信息，请点击此处：https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html查找类型为：triggerable的事件所有这些都可以称为owl.trigger('event-name');

你的代码一定是这样的：

if (event.keyCode === 37) {
/*left key*/
owl.trigger('prev.owl.carousel');
} else if (event.keyCode === 39) {
/*right key*/
owl.trigger('next.owl.carousel');
}

还有一件事(通过类名检测旋转木马：document.querySelector(".owl-theme")因此，触发器将同时附加到具有该类名的所有旋转木马上。最好的方法是通过id检测猫头鹰——它只会在一个带有一个id的转盘中调用触发器。例如：

<div id="myCarousel1" class="owl-carousel owl-theme">
document.getElementById('myCarousel1');