Swiper slider not working as expected with loop: true and centeredSlides: false

Question

Swiper slider is not working properly with loop set to true and centeredSlides set to false.

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.

Here's the JSFiddle

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;

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container gallery-thumbs">
  <div class="swiper-wrapper">
     <div class="swiper-slide">1</div>
     <div class="swiper-slide">2</div>
     <div class="swiper-slide">3</div>
     <div class="swiper-slide">4</div>
     <div class="swiper-slide">5</div>
     <div class="swiper-slide">6</div>
  </div>
</div>
<div class="swiper-container gallery-top">
  <div class="swiper-wrapper">
   <div class="swiper-slide">1</div>
     <div class="swiper-slide">2</div>
     <div class="swiper-slide">3</div>
     <div class="swiper-slide">4</div>
     <div class="swiper-slide">5</div>
     <div class="swiper-slide">6</div>
  </div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

Solution

You can Do Something Like this

HTML

 <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
        </div>
    </div>

CSS

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: 70%;
  margin: 0;
  margin-left: auto;
}

.gallery-thumbs {
  //height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.gallery-thumbs.swiper-container {
  padding: 10px;
  margin: 0px;
}

.gallery-thumbs .swiper-slide {
  height: 30%;
  opacity: 0.4;
}

.gallery-thumbs .swiper-slide-active {
  opacity: 1;
  border: 2px solid #ffa303;
}
.gallery-top{
    float:right;
    width:80%;
}


.gallery-thumbs{
    float:left;
    width:20%;
    height:80%;
}

JS

var galleryTop = new Swiper(".gallery-top", {
  nextButton: ".swiper-button-next",
  prevButton: ".swiper-button-prev",
  spaceBetween: 10,
  loop:true,
  loopedSlides: 50
});
var galleryThumbs = new Swiper(".gallery-thumbs", {
  spaceBetween: 10,
  slidesPerView: "auto",
  touchRatio: 0.2,
  loop:true,
  slideToClickedSlide: true,
  loopedSlides: 50,
  direction:'vertical'
});
galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;

Codepen Link For Reference

Give this a try.