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

Answer 1

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.