title: Swiper thumbnail slider behaving odd when centeredSlides is set to false
body: <p>I have two sliders: a main slider on the left side and a thumbnail-slider acting as the thumbnail-view for the main slider. The thumbnail-slider, however, is not behaving correctly: Around the sixth or seventh slide, the thumbnail-slider picks the thumbnail before the current one, instead of taking the next, and after that it stays buggy.</p>
  
  <p>I tried setting the <code>centeredSlides</code> option to <code>true</code>. The thumbnail-slider is then behaving correctly. However, I need <code>centeredSlides</code> to be <code>false</code> and the currently active thumbnail-slide has to be the top one.</p>
  
  <p>You probably get my point better with a script, so here goes:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var productSlider = new Swiper('.product-slider', {
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      spaceBetween: 10
    });
    var productThumbs = new Swiper('.product-thumbs', {
      spaceBetween: 5,
      centeredSlides: false,
      slidesPerView: 4,
      touchRatio: 0.2,
      slideToClickedSlide: true,
      direction: 'vertical'
    });
    productSlider.params.control = productThumbs;
    productThumbs.params.control = productSlider;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin-top: 30px;
  }
  .product-slider {
    height: 430px;
    box-shadow: 0 0 15px #ECECEC;
   }
   
  .product-slider .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .product-thumbs {
    height: 430px;
  }
  
  .product-thumbs .swiper-slide {
    width: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .product-thumbs .swiper-slide-active {
    border: solid 2px #ECECEC;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-10"&gt;
        &lt;div class="swiper-container product-slider"&gt;
          &lt;div class="swiper-wrapper"&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/300/300/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/300/300/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/300/300/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/300/300/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/300/300/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/300/300/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/300/300/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/300/300/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/300/300/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/300/300/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/300/300/nature/10"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="swiper-button-next"&gt;
            &lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="swiper-button-prev"&gt;
            &lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-2"&gt;
        &lt;div class="swiper-container product-thumbs"&gt;
          &lt;div class="swiper-wrapper"&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/90/90/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/90/90/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/90/90/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/90/90/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/90/90/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/90/90/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/90/90/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/90/90/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/90/90/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/90/90/nature/10"&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide"&gt;
              &lt;img src="http://lorempixel.com/90/90/nature/10"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anyone got any solution for this?</p>