Swiper не корректная работа paginate

Нашел на просторах codepen слайдер, где основная paginate находится слева и она вертикальная, но она была не бесконечная (loop), я добавил параметры loop: true; но теперь при переключении на слайд назад от первого, он не дает переключить ни вперед, ни назад (ни скроллингом, ни переключением в окне paginate, только выбором активного слайда по середине в paginate). Код:

<!-- Slider main wrapper -->
<div class="swiper-container-wrapper">
  <!-- Slider main container -->
  <div class="swiper-container gallery-top">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">
        <div class="title">Responsive vertical thumbnail gallery</div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Magna fermentum iaculis eu non diam. </div>
      </div>
      <div class="swiper-slide">
        <div class="title">Slide 2</div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui id ornare arcu odio. Tristique nulla aliquet enim tortor. </div>
      </div>
      <div class="swiper-slide">
        <div class="title">Slide 3</div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer feugiat scelerisque varius morbi enim nunc faucibus. Bibendum enim facilisis gravida neque convallis a cras semper. Faucibus turpis in eu mi bibendum neque egestas. Ac turpis egestas integer eget aliquet nibh. Tellus molestie nunc non blandit massa enim nec dui. Sit amet massa vitae tortor. </div>
      </div>
      <div class="swiper-slide">
        <div class="title">Slide 4</div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
      </div>
      <div class="swiper-slide">
        <div class="title">Slide 5</div>
        <div class="description">Lorem ipsum dolor sit amet</div>
      </div>
      <div class="swiper-slide">
        <div class="title">Slide 6</div>
        <div class="description">Lorem ipsum dolor sit amet</div>
      </div>
    </div>
    <!-- Add Arrows -->
  </div>
  <!-- Slider thumbnail container -->
  <div class="swiper-container gallery-thumbs">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
    </div>
  </div>
</div>

css:

$breakpoint: 480px;
// You also need to change the JS breakpoint.

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%;
  margin-left: auto;
  margin-right: auto;
  @media (min-width: $breakpoint) {
    min-height: 320px;
  }
  &-wrapper {
    display: flex;
    flex-flow: column nowrap;
    @media (min-width: $breakpoint) {
      flex-flow: row nowrap;
    }
    height: 100vh;
    width: 100vw;
  }
}

.swiper-button {
  &-next,
  &-prev {
    color: #000;
  }
}

.swiper-slide {
  text-align: center;
  background-size: cover;
  background-position: center;
  background-color: #fff;

  /* Center slide text vertically */
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  
  .description {
    overflow: scroll;
  }
  /* Slide content */
  .description,
  .title {
    display: block;
    opacity: 0;
    transition: 0.5s ease 0.5s;
  }
  &-active {
    .description,
    .title {
      opacity: 1;
    }
    .title {
      margin-bottom: 0.5rem;
      font-size: 24px;
      color: #000;
      transition: opacity 0.5s ease 0.5s;
    }
    .description {
      font-size: 16px;
      color: #777;
      transition: opacity 0.5s ease 0.75s;
    }
  }
}

.gallery-top {
  position: relative;
  width: 100%;
  height: 75vh;
  @media (min-width: $breakpoint) {
    width: 80%;
    height: 100vh;
    margin-right: 10px;
  }
}

.gallery-thumbs {
  width: 100%;
  height: 25vh;
  padding-top: 10px;
  @media (min-width: $breakpoint) {
    width: 20%;
    height: 100vh;
    padding: 0;
  }
  .swiper-wrapper {
    flex-direction: row;
    @media (min-width: $breakpoint) {
      flex-direction: column;
    }
  }
  .swiper-slide {
    width: 25%;
    flex-flow: row nowrap;
    @media (min-width: $breakpoint) {
      flex-flow: column nowrap;
      width: 100%;
    }
    height: 100%;
    opacity: 0.75;
    cursor: pointer;
  }
  .swiper-slide-thumb-active {
    opacity: 1;
  }
}

JS swiper:

$(function () {
  var galleryThumbs = new Swiper(".gallery-thumbs", {
    centeredSlides: true,
    loop: true,
    loopedSlides: 3,
    centeredSlidesBounds: true, 
    direction: "horizontal",
    spaceBetween: 20,
    slidesPerView: 1,
    freeMode: false,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
    watchOverflow: true,
    breakpoints: {
      480: {
        direction: "vertical",
        slidesPerView: 3
      }
    }
  });
  var galleryTop = new Swiper(".gallery-top", {
    direction: "horizontal",
    spaceBetween: 10,
    loop: true,
    slidesPerView: 'auto',
    loopedSlides: 3,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    thumbs: {
      swiper: galleryThumbs
    }
  });
  galleryTop.on("slideChangeTransitionStart", function () {
    galleryThumbs.slideTo(galleryTop.activeIndex);
  });
  galleryThumbs.on("transitionStart", function () {
    galleryTop.slideTo(galleryThumbs.activeIndex);
  });
  
});

Ссылка на codepen, если кому надо будет посмотреть https://codepen.io/StZD/pen/MWVrOKq