react-id-swiper 导航箭头按钮和分页不起作用答案

【问题标题】：react-id-swiper navigation arrow buttons and pagination not workingreact-id-swiper 导航箭头按钮和分页不起作用
【发布时间】：2020-11-13 17:14:52
【问题描述】：

我正在尝试在我的项目中使用 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。谁能告诉我我错过了什么？

【问题讨论】：

标签： javascript reactjs slider swiper swiperjs

【解决方案1】：

我也遇到过同样的问题。

原因是使用了swiper@^6.4.5。我不知道究竟是什么版本，但在6.4.5 swiper 有自己的 react 组件实现，我们必须使用它。

参考这个页面了解如何使用 swiper 的 react 实现： https://swiperjs.com/react/

【讨论】：