JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<section class="section-works">
        <div class="grid">
          <div class="section-works__container clearfix">
            <div class="section-works__slider-container">
              <div class="section-works__slider">
                <a class="section-works__item" href="#">
                  <img class="section-works__img" src="http://lenzabor.probeloff.net/img/works/1.jpg" alt="Название забора 1" width="640" height="360" title="" />
                </a>
                <a class="section-works__item" href="#">
                  <img class="section-works__img" src="http://lenzabor.probeloff.net/img/works/2.jpg" alt="Название забора 2" width="640" height="360" title="" />
                </a>
                <a class="section-works__item" href="#">
                  <img class="section-works__img" src="http://lenzabor.probeloff.net/img/works/3.jpg" alt="Название забора 3" width="640" height="360" title="" />
                </a>
                <a class="section-works__item" href="#">
                  <img class="section-works__img" src="http://lenzabor.probeloff.net/img/works/4.jpg" alt="Название забора 4" width="640" height="360" title="" />
                </a>
                <a class="section-works__item" href="#">
                  <img class="section-works__img" src="http://lenzabor.probeloff.net/img/works/5.jpg" alt="Название забора 5" width="640" height="360" title="" />
                </a>
                <a class="section-works__item" href="#">
                  <img class="section-works__img" src="http://lenzabor.probeloff.net/img/works/1.jpg" alt="Название забора 1" width="640" height="360" title="" />
                </a>
                <a...

SCSS

.grid {
  width: 1170px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.section-works {
  text-align: center;

  &__container {
    position: relative;
  }

  &__slider-container {
    width: 500px;
    position: relative;
  }

  &__previews-container {
    width: 458px;
    position: relative;
  }

  &__img, &__img-previews {
    display: none !important;
  }

  &__item {
    display: block;
    height: 458px;
    overflow: hidden;
  }

  &__slider-previews {
    height: 458px;
    overflow: hidden;
    .slick-slide {
      > div {
        display: inline-block;
        width: 49%;
      }
    }
    .slick-current {
      border: 3px solid red;
    }
  }

  &__item-previews {
    height: 125px !important;
    overflow: hidden;
    margin-bottom: 36px;
    position: relative;
    cursor: pointer;
  }

}

JavaScript

$(function() {

  $(".section-works__item").each(function(i) {
    let imgGallery = $(this).find(".section-works__img").attr("src");

    $(this).css({"background":"url(" + imgGallery + ") center no-repeat", "background-size":"cover"});
  });

  $(".section-works__slider").slick({
    infinite: true,
    fade: false,
    autoplay: false,
    autoplaySpeed: 5000,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    swipeToSlide: true,
    dots: false,
    adaptiveHeight: false,
    arrows: true,
    asNavFor: ".section-works__slider-previews",
    appendArrows: $(".section-works__navigation"),
    prevArrow: "<span class=\"section-works__prev\"></span>",
    nextArrow: "<span class=\"section-works__next\"></span>"
  });

  $(".section-works__item-previews").each(function(i) {
    let imgGalleryPreviews = $(this).find(".section-works__img-previews").attr("src");

    $(this).css({"background":"url(" + imgGalleryPreviews + ") center no-repeat", "background-size":"cover"});
  });

  $(".section-works__slider-previews").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    rows: 2,
    slidesPerRow: 1,
    swipeToSlide: true,
    arrows: false,
    dots: false,
    focusOnSelect: true,
    vertical: true,
    verticalSwiping: true,
    asNavFor: ".section-works__slider",
    responsive: [
      {
        breakpoint: 992,
        settings: {
          vertical: false,
          verticalSwiping: false
        }
      },
      {
        breakpoint: 480,
        settings: {
          vertical: false,
          verticalSwiping: false,
          slidesToShow: 2,
        }
      }
    ]
  });

});