Swiper React 鼠标滚轮滚动和键盘控制不起作用

Question

在React的SwiperJs中使用鼠标滚轮或键盘控制滑动不起作用。我似乎找不到任何内容，并且遵循 Swiper API 文档也没有帮助。

使用反应：17.0.1 刷卡器：6.4.11

这里有一个沙盒设置

const App = () => {
  const slides = [1, 2, 3, 4];

  return (
    <Swiper
      slidesPerView={2}
      keyboard={{ enabled: true }}
      direction="vertical"
      mousewheel
    >
      {slides.map((slide) => (
        <SwiperSlide key={slide}>
          <h1>Slide</h1>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

Answer 1

请获取 SwiperCore 模块执行以下操作：

import SwiperCore, { Keyboard } from 'swiper';

并添加以下代码行：

SwiperCore.use([Keyboard]);

这应该可以让键盘正常工作。

Answer 2

这对我来说非常有效。

import SwiperCore, { Keyboard, Mousewheel } from "swiper/core";

SwiperCore.use([Keyboard, Mousewheel]);

const App = () => {

  const slides = [1, 2, 3, 4];

  return (
    <Swiper
      slidesPerView={2}
      keyboard={true}
      direction="vertical"
      mousewheel={true}
    >
      {slides.map((slide) => (
        <SwiperSlide key={slide}>
          <h1>Slide</h1>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};