React Swiper Navigation 不工作怎么办呢？

Question

使用 Swiper 反应组件。 但是导航或其他任何东西都不起作用。

https://swiperjs.com/react

        <Swiper
          // install Swiper modules
          modules={[Navigation, Pagination, Scrollbar, A11y]}
          spaceBetween={50}
          slidesPerView={1}
          navigation={true}
          pagination={{ clickable: true }}
          className="mySwiper"
        >
        {banners.map((item, i) => (
          <SwiperSlide>
            <div className="slider-single">
              blabla
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

这是我上面的代码。 导航箭头出现。但是当我点击它们时，它不会移动到下一张幻灯片。 （当我拖动它时它会移动到下一个）

Answer 1

很难回答你的问题（没有完整的代码示例）。

您是否安装了导航模块（是/否）？

最好的办法是将您的代码与这个官方演示进行比较：

Swiper Navigation 演示 - 代码框： https://codesandbox.io/s/13eu6

来自文档：

默认情况下，Swiper React 使用 Swiper 的核心版本（没有任何 附加模块）。如果你想使用 Navigation、Pagination 和 其他模块，您必须先安装它们。

// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

export default () => {
  return (
    <Swiper
      // install Swiper modules
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};