React中如何通过点击space让Swiper轮播换幻灯片？

Question

我在 React 应用程序中使用 "swiper": "6.8.4" 进行轮播。

我需要通过单击“Space”按钮来更改幻灯片。默认情况下，它通过单击箭头进行更改。你能告诉我怎么做吗？

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>

Answer 1

document.body.onkeyup = function(e){ if(e.keyCode == 32){ swiper.slideNext(); }

您还可以检查是否有任何其他库正在使用 spacebarr 的事件侦听器，这可能会中断您的进程

Answer 2

您要做的第一件事是将 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 向下滚动页面，您可能不想阻止默认操作。

React中如何通过点击space让Swiper轮播换幻灯片？

How to make Swiper carousel change slides by clicking space in React?

javascript

reactjs

carousel

swiper