title: Problem with carousel with thumbs (react-id-swiper)
body: <p>I'm trying to make a carousel with 'react-id-swiper' component with thumbs, but it seems that there is no connection between the main carousel and the carousel with thumbs.</p>
  
  <p>I searched out all over the internet with no luck. Also scanned the documentation of "react-id-swiper" and all the reported issues at this component's github.</p>
  
  <pre><code>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 =&gt; {
      if (ref) this.setState({ gallerySwiper: ref.swiper });
    };
  
    thumbRef = ref =&gt; {
      if (ref) this.setState({ thumbnailSwiper: ref.swiper });
    };
  
    render() {
      const thumbnailSwiperParams = {
        paceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true,
        onInit: swiper =&gt; {
          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 =&gt; {
          this.swiper1 = swiper;
        }
      };
  
      return (
        &lt;React.Fragment&gt;
          &lt;div className="gallery-wrapper"&gt;
            &lt;Swiper {...params} ref={this.galleryRef}&gt;
              &lt;div className="swiper-slide"&gt;
                &lt;img src="http://lorempixel.com/800/800/sports/1/" /&gt;
              &lt;/div&gt;
              &lt;div className="swiper-slide"&gt;
                &lt;img src="http://lorempixel.com/800/400/sports/2/" /&gt;
              &lt;/div&gt;
              &lt;div className="swiper-slide"&gt;
                &lt;img src="http://lorempixel.com/400/800/sports/3/" /&gt;
              &lt;/div&gt;
            &lt;/Swiper&gt;
          &lt;/div&gt;
          &lt;div className="thumbs-container"&gt;
            &lt;Swiper {...thumbnailSwiperParams} ref={this.thumbRef}&gt;
              &lt;div className="swiper-slide1"&gt;
                &lt;img src="http://lorempixel.com/100/100/sports/1/" /&gt;
              &lt;/div&gt;
              &lt;div className="swiper-slide1"&gt;
                &lt;img src="http://lorempixel.com/100/100/sports/2/" /&gt;
              &lt;/div&gt;
              &lt;div className="swiper-slide1"&gt;
                &lt;img src="http://lorempixel.com/100/100/sports/3/" /&gt;
              &lt;/div&gt;
            &lt;/Swiper&gt;
          &lt;/div&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  </code></pre>
  
  <p>Also you can see a demo: <a href="https://codesandbox.io/s/74mz4jz646" rel="nofollow noreferrer">https://codesandbox.io/s/74mz4jz646</a></p>
  
  <p>This is the official code examples: <a href="http://kidjp85.github.io/react-id-swiper/" rel="nofollow noreferrer">http://kidjp85.github.io/react-id-swiper/</a> ("Thumbs Gallery With Two-way Control")</p>
  
  <p>UPD: ok guys, Swiper is not really 100% good for thumbnails. So I just decided to use react-slick with build-in thumbs functionality. You can find example in the react-slick docs.</p>