React Swiper 导航不工作如何工作？

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 导航演示 -codesandbox： 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>
  );
};