Блог

Я пытаюсь создать карусель с компонентом ‘react-id-swiper’ с помощью больших пальцев, но кажется, что нет никакой связи между основной каруселью и каруселью с большими пальцами.

Я безуспешно искал по всему Интернету. Также проверил документацию «react-id-swiper» и все сообщенные проблемы на github этого компонента.

 import React from "react";
import styles from "./Gallery.css";
import Swiper from "react-id-swiper";
import("react-id-swiper/src/styles/css/swiper.css");
import { Navigation } from "swiper/dist/js/swiper.esm";

import "../styles.css";

export default class Gallery extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      gallerySwiper: null,
      thumbnailSwiper: null
    };
  }

  componentWillUpdate(nextProps, nextState) {
    if (nextState.gallerySwiper amp;amp; nextState.thumbnailSwiper) {
      const { gallerySwiper, thumbnailSwiper } = nextState;

      gallerySwiper.controller.control = thumbnailSwiper;
      thumbnailSwiper.controller.control = gallerySwiper;
    }
  }

  galleryRef = ref => {
    if (ref) this.setState({ gallerySwiper: ref.swiper });
  };

  thumbRef = ref => {
    if (ref) this.setState({ thumbnailSwiper: ref.swiper });
  };

  render() {
    const thumbnailSwiperParams = {
      paceBetween: 10,
      centeredSlides: true,
      slidesPerView: "auto",
      touchRatio: 0.2,
      slideToClickedSlide: true,
      onInit: swiper => {
        this.swiper2 = swiper;
      }
    };

    const params = {
      modules: [Navigation],
      slidesPerView: 1,
      zoom: {
        maxRatio: 5
      },
      spaceBetween: 30,
      loop: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      onInit: swiper => {
        this.swiper1 = swiper;
      }
    };

    return (
      <React.Fragment>
        <div className="gallery-wrapper">
          <Swiper {...params} ref={this.galleryRef}>
            <div className="swiper-slide">
              <img src="http://lorempixel.com/800/800/sports/1/" />
            </div>
            <div className="swiper-slide">
              <img src="http://lorempixel.com/800/400/sports/2/" />
            </div>
            <div className="swiper-slide">
              <img src="http://lorempixel.com/400/800/sports/3/" />
            </div>
          </Swiper>
        </div>
        <div className="thumbs-container">
          <Swiper {...thumbnailSwiperParams} ref={this.thumbRef}>
            <div className="swiper-slide1">
              <img src="http://lorempixel.com/100/100/sports/1/" />
            </div>
            <div className="swiper-slide1">
              <img src="http://lorempixel.com/100/100/sports/2/" />
            </div>
            <div className="swiper-slide1">
              <img src="http://lorempixel.com/100/100/sports/3/" />
            </div>
          </Swiper>
        </div>
      </React.Fragment>
    );
  }
}

  

Также вы можете увидеть демонстрацию: https://codesandbox.io/s/74mz4jz646

Это официальные примеры кода: http://kidjp85.github.io/react-id-swiper / («Галерея больших пальцев с двусторонним управлением»)

UPD: хорошо, ребята, Swiper на самом деле не на 100% хорош для эскизов. Поэтому я просто решил использовать react-slick со встроенной функциональностью thumbs. Вы можете найти пример в документах react-slick .

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

Чтобы решить эту проблему, просто добавьте в импорт модуля:

 // For version <=2.3.2
import { Swiper, Controller } from 'swiper/dist/js/swiper.esm';
// For version >=2.4.0
import { Swiper, Controller } from 'swiper/js/swiper.esm';
  

И внутри настроек слайдера

 const gallerySwiperParams = {
        Swiper,
        modules: [Controller],
        getSwiper: getGallerySwiper,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        spaceBetween: 10,
      };
  

модули: [Контроллер], это делает волшебство

Это также может быть какая-то ошибка в react. Удаление «строгого режима» сработало для меня

Замена этого:

 ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);
  

с этим

 ReactDOM.render(
  <App />,
  rootElement
);
  

и все заработало