reactjs React Swiper导航不工作怎么工作呢?

avwztpqn  于 2023-03-22  发布在  React
关注(0)|答案(4)|浏览(210)

正在开发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>

这是我上面的代码。导航箭头很漂亮。但是当我点击它们时,它不会移动到下一张幻灯片。(当我拖动它时,它会移动到下一张幻灯片。)

x33g5p2x

x33g5p2x1#

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

是否安装导航模块(是/否)?

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

滑动导航演示- 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>
  );
};
jum4pzuy

jum4pzuy2#

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

正如Ezra Siton所说,我认为问题在于缺少导入样式命令。

ia2d9nvy

ia2d9nvy3#

超简单
在您组件中

<Swiper
  // install Swiper modules
  modules={[Navigation, Pagination, Scrollbar, A11y]}
  ...
  **navigation ={true}**
 ... other configs
>

或者你可以像这样示例化一个自定义的Build:
//导入Swiper和模块

import Swiper, { Navigation, Pagination, Scrollbar } from 'swiper';

const swiper = new Swiper('.swiper', {
  // Install modules
  modules: [Navigation, Pagination, Scrollbar],
  speed: 500,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // ...
});
4xrmg8kj

4xrmg8kj4#

您需要导入捆绑的css文件。
import“swiper/swiper-bundle.css”;

相关问题