JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

  <div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiper-inner" style="width: 1200px; background: #7f7fff;">
          1
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-inner" style="width: 400px; background: #f35747;">
          2
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-inner" style="width: 100px; background: #91605b;">
          3
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-inner" style="width: 1200px; background: #c8bebd;">
          4
        </div>
      </div>
    </div>

  </div>
  <div class="swiper-container gallery-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="thumb-holder" data-index="0">
          Go to 1
        </div>
      </div>
      <div class="swiper-slide">
        <div class="thumb-holder" data-index="1">
          Go to 2
        </div>
      </div>
      <div class="swiper-slide">
        <div class="thumb-holder" data-index="2">
          Go to 3
        </div>
      </div>
      <div class="swiper-slide">
        <div class="thumb-holder" data-index="3">
          Go to 4
        </div>
      </div>
    </div>
  </div>


<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

CSS

.thumb-holder {
  display: inline-block;
}

.gallery-top .swiper-slide {
  height: 50px;
  display: inline-block;
  width: auto !important;
}

.gallery-top .swiper-wrapper {
  -webkit-transition-timing-function: linear!important;
  -o-transition-timing-function: linear!important;
  transition-timing-function: linear!important;
  -moz-osx-transition-timing-function: linear!important;
}


.gallery-thumbs .swiper-slide {
  display: inline-block;
  width: auto !important;
  padding: 0 20px;
}

JavaScript

var galleryThumbs = new Swiper('.gallery-thumbs', {
  spaceBetween: 0,
  slidesPerView: 1,
  observer: true,
  simulateTouch: true,
  slideToClickedSlide: true,
  watchSlidesVisibility: true,
  disableOnInteraction: false,
  watchSlidesProgress: true,
  loopPreventsSlide: false,
  initialSlide: 1,
});
var galleryTop = new Swiper('.gallery-top', {
  spaceBetween: 0,
  loop: true,
  speed: 35000,
  freeMode: true,
  slideToClickedSlide: true,
  centeredSlides: false,
  slidesPerView: 'auto',
  initialSlide: -1,
  observer: true,
  loopPreventsSlide: false,
  autoplay: {
    delay: 0,
    disableOnInteraction: false,
    loopPreventsSlide: false,
  },
  disableOnInteraction: false,
  thumbs: {
    swiper: galleryThumbs
  }
});

$(".thumb-holder").click(function(){
  var tabData = $(this).attr('data-index');
  tabData = tabData -1;
  galleryTop.slideToLoop(tabData, 400);
  galleryTop.update();
});