javascript - react-id-swiper navigation arrow buttons and pagination not working - Stack Overflow

admin管理员组

文章数量:1384426

I am trying to use react-id-swiper in my project. I am just following the examples as shown in this website: /example/navigation.

For some reason the navigation buttons (Left and Right navigation arrow buttons) are not working for me. I even tried using the pagination, even that doesn't work.

This is the codesandbox that I created: =/src/App.js

Here's the code that I am using:

    import React from "react";
    import Swiper from "react-id-swiper";
    
    import "swiper/swiper.scss";
    import "swiper/ponents/navigation/navigation.scss";
    import "swiper/ponents/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>
      );
    }

I have the code examples taken from here: /example/navigation . Can someone tell me what am I missing?

I am trying to use react-id-swiper in my project. I am just following the examples as shown in this website: https://react-id-swiper.ashernguyen.site/example/navigation.

For some reason the navigation buttons (Left and Right navigation arrow buttons) are not working for me. I even tried using the pagination, even that doesn't work.

This is the codesandbox that I created: https://codesandbox.io/s/peaceful-leftpad-9cgts?file=/src/App.js

Here's the code that I am using:

    import React from "react";
    import Swiper from "react-id-swiper";
    
    import "swiper/swiper.scss";
    import "swiper/ponents/navigation/navigation.scss";
    import "swiper/ponents/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>
      );
    }

I have the code examples taken from here: https://react-id-swiper.ashernguyen.site/example/navigation . Can someone tell me what am I missing?

• javascript
• reactjs
• slider
• swiper.js

Share Improve this question Follow asked Nov 13, 2020 at 17:14 VikVik 10611 gold badge33 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I got the solution of this issue, the root cause are:

1. the version of react-id-swiper and swiper did not match each other I fix this by using [email protected] and [email protected]
2. need to import below packages

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

and add this use code after import

SwiperCore.use([Pagination]);

I got the answer from here: https://github./kidjp85/react-id-swiper/issues/453#issuement-814500317

Hope this answer can help you.

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 ponents, which we have to use.

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

I have faced this issue as well. Even after you import it you have to load the modules directly onto the ponent.

Follow the code below and it should work perfectly

    import { Swiper, SwiperSlide } from "swiper/react";
    import "swiper/css/pagination"; // if yo want to style it 
    import { Navigation, Pagination} from "swiper";

const Slider = () => {
      return (
         <Swiper 
     modules={[Pagination]}//you can add any other module here such as navigation and whatever else 
pagination={{ clickable: true }}
>
              <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>
          );
        };

本文标签： javascriptreactidswiper navigation arrow buttons and pagination not workingStack Overflow