title: Swiper slider not working as expected with loop: true and centeredSlides: false
body: <p>Swiper slider is not working properly with loop set to true and centeredSlides set to false. </p>
  
  <p>When a thumbnail or a navigation arrow is clicked the main slider doesn't show the active thumbnail, i searched and didn't found any solution for this, i'll be grateful if someone knows how to solve it without having to remove none current options.</p>
  
  <p>Here's the <a href="https://jsfiddle.net/GabrielS0uza/63ou6juL/" rel="nofollow noreferrer">JSFiddle</a></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', {
     slidesPerView: 1,  
        loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
      var galleryThumbs = new Swiper('.gallery-thumbs', {
        direction: 'vertical',
        slidesPerView: 4,
        slideToClickedSlide: true,
        spaceBetween: 10,
        loop: true,
      });
      galleryTop.controller.control = galleryThumbs;
      galleryThumbs.controller.control = galleryTop;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 20px;
  }
  
  .gallery-thumbs {
    float: left;
    width: calc(16% - 20px);
    height: 280px;
    margin-right: 20px;
  }
  
  .gallery-thumbs .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
  }
  
  .gallery-thumbs .swiper-slide-active {
    border: 1px solid grey;
  }
  
  .gallery-thumbs .swiper-slide:hover {
    border: 1px solid grey;
  }
  
  .gallery-top {
    float: left;
    width: 84%;
    height: 280px;
  }
  
  .gallery-top .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid grey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/&gt;
  &lt;div class="swiper-container gallery-thumbs"&gt;
    &lt;div class="swiper-wrapper"&gt;
       &lt;div class="swiper-slide"&gt;1&lt;/div&gt;
       &lt;div class="swiper-slide"&gt;2&lt;/div&gt;
       &lt;div class="swiper-slide"&gt;3&lt;/div&gt;
       &lt;div class="swiper-slide"&gt;4&lt;/div&gt;
       &lt;div class="swiper-slide"&gt;5&lt;/div&gt;
       &lt;div class="swiper-slide"&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="swiper-container gallery-top"&gt;
    &lt;div class="swiper-wrapper"&gt;
     &lt;div class="swiper-slide"&gt;1&lt;/div&gt;
       &lt;div class="swiper-slide"&gt;2&lt;/div&gt;
       &lt;div class="swiper-slide"&gt;3&lt;/div&gt;
       &lt;div class="swiper-slide"&gt;4&lt;/div&gt;
       &lt;div class="swiper-slide"&gt;5&lt;/div&gt;
       &lt;div class="swiper-slide"&gt;6&lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Add Arrows --&gt;
    &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
    &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>