title: swiper 3.3.1 main image and thumbnail not in sync
body: <p>swiper 3.3.1
  issue reproduced on: chrome, firefox (haven't checked other browsers)</p>
  
  <p>As I click on the right arrow and reach the 5th image, the thumbnails slide to the wrong image (main image and thumbnail image are not in sync anymore).</p>
  
  <p>The problem disappears if I set centeredSlides: true (but I want it to work without centering)</p>
  
  <p>can anyone help?
  here is a fiddle <a href="https://jsfiddle.net/Paofiddle/5jzk0ojq/4/" rel="nofollow noreferrer">https://jsfiddle.net/Paofiddle/5jzk0ojq/4/</a>
  P.S it doesn't seem to work at all in the "run code snippet" thingy in here but you can see the issue via the fiddle link. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var galleryTop = new Swiper('.gallery-top', {
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          spaceBetween: 10,
          slidesPerView: 1
      });
      var galleryThumbs = new Swiper('.gallery-thumbs', {
          spaceBetween: 10,
          slidesPerView: 3,
          slideToClickedSlide: true
      });
      galleryTop.params.control = galleryThumbs;
      galleryThumbs.params.control = galleryTop;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    html, body {
          position: relative;
          height: 100%;
      }
      body {
          background: #000;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color:#000;
          margin: 0;
          padding: 0;
      }
      .swiper-container {
          width: 100%;
          height: 300px;
          margin-left: auto;
          margin-right: auto;
      }
      .swiper-slide {
          background-size: cover;
          background-position: center;
      }
      .gallery-top {
          height: 80%;
          width: 100%;
      }
      .gallery-thumbs {
          height: 20%;
          box-sizing: border-box;
          padding: 10px 0;
      }
      .gallery-thumbs .swiper-slide {
          width: 25%;
          height: 100%;
          opacity: 0.4;
      }
      .gallery-thumbs .swiper-slide-active {
          opacity: 1;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet"/&gt;
  &lt;div class="swiper-container gallery-top"&gt;
          &lt;div class="swiper-wrapper"&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"&gt;&lt;/div&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"&gt;&lt;/div&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"&gt;&lt;/div&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"&gt;&lt;/div&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"&gt;&lt;/div&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"&gt;&lt;/div&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!-- Add Arrows --&gt;
          &lt;div class="swiper-button-next swiper-button-white"&gt;&lt;/div&gt;
          &lt;div class="swiper-button-prev swiper-button-white"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-container gallery-thumbs"&gt;
          &lt;div class="swiper-wrapper"&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"&gt;&lt;/div&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"&gt;&lt;/div&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"&gt;&lt;/div&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"&gt;&lt;/div&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"&gt;&lt;/div&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"&gt;&lt;/div&gt;
              &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>