2

我正在尝试在我的项目中使用react-id-swiper。我只是按照本网站所示的示例进行操作：https ://react-id-swiper.ashernguyen.site/example/navigation 。

由于某种原因，导航按钮（左右导航箭头按钮）对我不起作用。我什至尝试使用分页，即使那样也行不通。

这是我创建的代码框：https ://codesandbox.io/s/peaceful-leftpad-9cgts?file=/src/App.js

这是我正在使用的代码：

    import React from "react";
    import Swiper from "react-id-swiper";
    
    import "swiper/swiper.scss";
    import "swiper/components/navigation/navigation.scss";
    import "swiper/components/pagination/pagination.scss";
    import "./styles.scss";
    
    const params = {
      effect: "cube",
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    };
    
    const Slider = () => {
      return (
        <Swiper {...params}>
          <div className="myslide">Slide #1</div>
          <div className="myslide">Slide #2</div>
          <div className="myslide">Slide #3</div>
          <div className="myslide">Slide #4</div>
          <div className="myslide">Slide #5</div>
        </Swiper>
      );
    };
    
    export default function App() {
      return (
        <div className="App">
          <Slider />
        </div>
      );
    }

我有从这里获取的代码示例：https ://react-id-swiper.ashernguyen.site/example/navigation 。有人能告诉我我错过了什么吗？

4

1 回答 1

0

I've faced the same issue.

The reason is that swiper@^6.4.5 is used. I don't know since what version exactly, but in 6.4.5 swiper has its own implementation of react components, which we have to use.

Refer to this page to understand how to use swiper's react implementation: https://swiperjs.com/react/

于 2020-12-20T13:32:31.340 回答