Блог

Я пытаюсь использовать 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 .
Может кто-нибудь сказать мне, чего мне не хватает?

Я получил решение этой проблемы, основной причиной являются:

1. версии react-id-swiper и swiper не совпадали друг с другом. Я исправляю это с помощью react-id-swiper@4.0.0 и swiper@6.0.4
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

Надеюсь, этот ответ поможет вам.

Я столкнулся с той же проблемой.

Причина в том, что swiper@^6.4.5 используется. Я не знаю, с какой именно версии, но в 6.4.5 swiper есть собственная реализация компонентов react, которые мы должны использовать.

Обратитесь к этой странице, чтобы понять, как использовать реализацию реакции swiper: https://swiperjs.com/react /

Я тоже столкнулся с этой проблемой. Даже после импорта вам необходимо загружать модули непосредственно в компонент.

Следуйте приведенному ниже коду, и он должен работать идеально

     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>
          );
        };