我在 React 應用程式中使用 "swiper": "6.8.4" 進行輪播。
我需要通過單擊“空格”按鈕來更改幻燈片。默認情況下，它通過單擊箭頭來更改。你能告訴我怎么做嗎？
function Carousel() {
document.addEventListener("keydown", function(e){
if(KeyboardEvent.code == 'Space') {
swiper.slideNext(); //not working
}
if(e.keyCode == 32) {
swiper.slideNext(); //not working
}
});
return (
<div className={classes.carouselWrapper}>
<Swiper
autoplay={{
delay: 2500,
disableOnInteraction: false,
}}
keyboard={{
enabled: true,
onlyInViewport: true,
}}
pagination={true}
className="mySwiper"
cssMode={true}
loop={false}
scrollbar={{draggable: true}}
modules={[Autoplay, Navigation, Pagination, Keyboard]}
mousewheel={true}
onSwiper={swiper => console.log(swiper)}
slidesPerView={1}
>
<button>
Change slide by clicking space
</button>
<SwiperSlide>
1
</SwiperSlide>
<SwiperSlide>
2
</SwiperSlide>
</Swiper>
uj5u.com熱心網友回復：
您要做的第一件事是保存swiper到狀態，以便您可以呼叫slideNext，您可以使用該onSwiper函式來執行此操作。然后用于useEffect添加和洗掉keydown監聽器。
function Carousel() {
const [swiper, setSwiper) = useState(null);
useEffect(() => {
const keydownHandler = e => {
if(swiper && e.keyCode == 32) {
e.preventDefault();
swiper.slideNext();
}
}
document.addEventListener('keydown', keydownHandler);
return () => {
document.removeEventListener('keydown', keydownHandler);
}
}, [swiper])
return (
<div className={classes.carouselWrapper}>
<Swiper
autoplay={{
delay: 2500,
disableOnInteraction: false,
}}
keyboard={{
enabled: true,
onlyInViewport: true,
}}
pagination={true}
className="mySwiper"
cssMode={true}
loop={false}
scrollbar={{draggable: true}}
modules={[Autoplay, Navigation, Pagination, Keyboard]}
mousewheel={true}
onSwiper={setSwiper}
slidesPerView={1}
>
<button>
Change slide by clicking space
</button>
<SwiperSlide>
1
</SwiperSlide>
<SwiperSlide>
2
</SwiperSlide>
</Swiper>
)
}
請記住，space瀏覽器使用它來向下滾動頁面，您可能不想阻止默認操作。
uj5u.com熱心網友回復：
document.body.onkeyup = function(e){ if(e.keyCode == 32){ swiper.slideNext(); }
您是否還可以檢查是否有任何其他庫正在使用空格鍵的事件偵聽器，這可能會中斷您的行程
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/481418.html
標籤：javascript 反应 旋转木马 刷卡器