javascript - React-id-swiper 导航箭头按钮和分页不起作用

Question

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

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

这是我创建的codesandbox: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 。 有人可以告诉我我错过了什么吗？

Answer 1

我得到了这个问题的解决方案， 根本原因是:

1. react-id-swiper 和 swiper 的版本不匹配 我通过使用 [email protected] 修复此问题和 [email protected]
2. 需要导入以下包

import Swiper from 'react-id-swiper';
import SwiperCore, { Pagination } from 'swiper';
import 'swiper/swiper-bundle.css';

并在导入后添加此使用代码

SwiperCore.use([Pagination]);

我从这里得到了答案:https://github.com/kidjp85/react-id-swiper/issues/453#issuecomment-814500317

希望这个回答可以帮到你。