JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<div class="bltov">

  <div class="bigf">
    <a href="" title=""><img src="https://nazya.com/anyimage/img04.taobaocdn.com/bao/uploaded/i4/T1lOmSXe4oXXbuTuDX_085028.jpg" alt="" title="" /></a>
  </div>

  <div class="minf">
    <section class="slick-vertical slider">
      <a href="" title=""><img src="https://nazya.com/anyimage/img04.taobaocdn.com/bao/uploaded/i4/T1lOmSXe4oXXbuTuDX_085028.jpg" alt="" title="" /></a>
      <a href="" title=""><img src="https://nazya.com/anyimage/img04.taobaocdn.com/bao/uploaded/i4/T1lOmSXe4oXXbuTuDX_085028.jpg" alt="" title="" /></a>
      <a href="" title=""><img src="https://nazya.com/anyimage/img04.taobaocdn.com/bao/uploaded/i4/T1lOmSXe4oXXbuTuDX_085028.jpg" alt="" title="" /></a>
      <a href="" title=""><img src="https://nazya.com/anyimage/img04.taobaocdn.com/bao/uploaded/i4/T1lOmSXe4oXXbuTuDX_085028.jpg" alt="" title="" /></a>
      <a href="" title=""><img src="https://nazya.com/anyimage/img04.taobaocdn.com/bao/uploaded/i4/T1lOmSXe4oXXbuTuDX_085028.jpg" alt="" title="" /></a>
      <a href="" title=""><img src="https://nazya.com/anyimage/img04.taobaocdn.com/bao/uploaded/i4/T1lOmSXe4oXXbuTuDX_085028.jpg" alt="" title="" /></a>
    </section>
  </div>

</div>



<script src="https://test.vl-it.ru//media/slick1/slick.min.js" type="text/javascript" charset="utf-8"></script>

CSS

.bltov {
  margin: 20px;
  padding: 20px;
  width: 55%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #E8E6E0;
}

.bigf {
  width: 80%;
  position: relative;
}

.bigf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.minf {
  width: 20%;
  margin-left: 20px;
}




/*стили от слайдера Slick Slider*/
.slick-slider {
  position: relative;

  display: block;
  box-sizing: border-box;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/*для того чтобы нижний пробел не было видно и стрелка ровно сидела*/
.slider .slick-list {
  margin-bottom: -20px;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;

  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slider img {
  width: 100%;
}

.slick-slider a {
  margin-bottom: 20px;
}

.slick-slider a:last-child {
  margin-bottom: 0;
}

.slick-center {
  transform: scale(1.2);
  -webkit-box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 15px 30px 0px...

JavaScript

$('.slick-vertical').slick({
    vertical: true,
    verticalSwiping: true,
    slidesToShow: 3,
    adaptiveHeight: true,
    respondTo: 'slick-vertical',
  });