JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<!-- Region area -->
<div class="region-area">
  <div class="container">
    <div class="row">
      <div class="col-md-12">

        <!-- widget -->

        <div class="widget">
          <div class="widget-area widget-area-one row">

            <div class="col-md-5">

              <div class="bxSlider-container">
                <ul class="bxslider product-slider" data-bx-slider=>

                  <!-- li.item -->
                  <li class="slide">
                    <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette4.wikia.nocookie.net/devilmaou/images/9/92/Giratina.png/revision/latest?cb=20140413190250')">
                    </div>
                  </li>
                  <!-- li : end -->

                  <!-- li.item -->
                  <li class="slide">
                    <div class="img-container" style="background-color: #f8f8f8; background-image: url('http://2.bp.blogspot.com/--gORRn5tL04/UDhREh-LLAI/AAAAAAAASA8/RN4gNJDMUm4/s1600/245Suicune+pokemon+gold+and+silver+artwork.png')">
                    </div>
                  </li>
                  <!-- li : end -->

                  <!-- li.item -->
                  <li class="slide">
                    <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette3.wikia.nocookie.net/pokemon/images/5/5c/486Regigigas_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150114033117')">
                    </div>
                  </li>
   ...

CSS

.bx-wrapper {
  background: none;
  box-shadow: none;
  border: 0;
  margin-bottom: 13px;
  max-width: 458px!important;
  width: 100%;
}

.widget .product-slider .img-container {
  height: 525px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

.widget .bx-custom-pager .img-container {
  width: 167px;
  height: 165px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

JavaScript

$(function() {

  var initThumbnailsSlider = function(object) {

    var $bxSlider = $(object);
    var $bxPager = $('.bx-custom-pager');

    if ($bxSlider.length < 1) {
      return;
    }

    $bxSlider.bxSlider({
      controls: false,
      pagerCustom: '#bx-pager',
      easing: 'easeInOutQuint',
      infiniteLoop: true,
      speed: 500
    });

    $bxPager.bxSlider({
      mode: 'horizontal',
      maxSlides: 4,
      minSlides: 8,
      slideWidth: 500,
      slideMargin: 25,
      easing: 'easeInOutQuint',
      controls: true,
      pager: false,
      moveSlides: 1,
      speed: 500,
      onSlideBefore: bxMove

    });

    function bxMove($ele, from, to) {
      var idx = parseInt(to, 10) - 1;
      $bxSlider.goToSlide(idx);
    }

  };


  // execute the function
  initThumbnailsSlider('[data-bx-slider]');
});