拇指旋转木马的问题（react-id-swiper）

Question

我正在尝试用 '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 && 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/ ("Thumbs Gallery With Two-way Control")

UPD：好的，伙计们，Swiper 并不是真的 100% 适合缩略图。所以我决定使用带有内置拇指功能的 react-slick。您可以在 react-slick 文档中找到示例。

Answer 1

对于使用自定义构建时遇到此问题的人，您必须手动导入模块，但在示例中他们使用导入所有内容的库

要解决此问题，只需添加到模块导入中：

// 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,
      };

模块：[控制器]，这就是魔法

Answer 2

也可能是反应中的一些错误。删除“严格模式”对我有用

替换这个：

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

有了这个

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

一切正常

拇指旋转木马的问题（react-id-swiper）

Problem with carousel with thumbs (react-id-swiper)

javascript

carousel

reactjs