reactjs - React Swiper Navigation 不工作怎么工作呢？

Question

正在研究 Swiper React 组件。但是导航或其他任何东西都不起作用。

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

很难回答您的问题(没有完整的代码示例)。

您是否安装了导航模块(是/否)？

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

滑动导航演示 - codesandbox: https://codesandbox.io/s/13eu6

来自文档:

By default Swiper React uses core version of Swiper (without anyadditional modules). If you want to use Navigation, Pagination andother modules, you have to install them first.

// 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>
  );
};