JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row">
    <div class="col-10">
      <div class="swiper-container product-slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
        </div>
        <div class="swiper-button-next">
          <i class="fa fa-chevron-right"></i>
        </div>
        <div...

CSS

body {
  margin-top: 30px;
}
.product-slider {
  height: 430px;
  box-shadow: 0 0 15px #ECECEC;
 }
 
.product-slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-thumbs {
  height: 430px;
}

/* Play around with this. Maybe your project does not use a vertical
thumbnail slider, but instead a horizontal one. You'd have to change the
margin-left values for this */
.product-thumbs .swiper-wrapper {
  margin-top: calc(-100% + 5px);
}

.product-thumbs .swiper-slide {
  width: auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-thumbs .swiper-slide-active {
  border: solid 2px #ECECEC;
}

JavaScript

$(document).ready(function() {
  
  var productSlider = new Swiper('.product-slider', {
    navigation: {
      nextButton: this.querySelector('.swiper-button-next'),
      prevButton: this.querySelector('.swiper-button-prev'),
    },
    spaceBetween: 10,
    thumbs: {
      swiper: productThumbs
    }
  });
  
  var productThumbs = new Swiper('.product-thumbs', {
    spaceBetween: 5,
    centeredSlides: true,
    slidesPerView: 4,
    touchRatio: 0.2,
    slideToClickedSlide: true,
    direction: 'vertical'
  });
 
  productSlider[0].controller.control = productThumbs;
  productThumbs[0].controller.control = productSlider;
});