JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container mt-3">
  <div class="row">
  
    <div class="col-sm-6 first">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>Nullam molestie venenatis tellus quis rutrum. Phasellus pulvinar mi quis elementum feugiat.</p>
    </div>
    
    <div class="col-sm-6 middle">
      <div class="carousel">
        <div class="issue">
          <img src="//via.placeholder.com/192x250" />
        </div>
        <div class="issue">
          <img src="//via.placeholder.com/192x250" />
        </div>
        <div class="issue">
          <img src="//via.placeholder.com/192x250" />
        </div>
        <div class="issue">
          <img src="//via.placeholder.com/192x250" />
        </div>
        <div class="issue">
          <img src="//via.placeholder.com/192x250" />
        </div>
        <div class="issue">
          <img src="//via.placeholder.com/192x250" />
        </div>
      </div>
    </div>
    
    <div class="col-sm-6 last">
      <div class="carousel-nav row">
        <div class="issue col-12">
          <img src="//via.placeholder.com/96x125" />
        </div>
        <div class="issue col-12">
          <img src="//via.placeholder.com/96x125" />
        </div>
        <div class="issue col-12">
          <img src="//via.placeholder.com/96x125" />
        </div>
        <div class="issue col-12">
          <img src="//via.placeholder.com/96x125" />
        </div>
        <div class="issue col-12">
          <img src="//via.placeholder.com/96x125" />
        </div>
        <div class="issue col-12">
          <img src="//via.placeholder.com/96x125" />
        </div>
      </div>
    </div>
    
  </div>
</div>

SCSS

.first {
  background: red;
}

.middle {
  background: blue;
}

.last {
  background: green;
}

.carousel .issue img {
  display: block;
  max-height: 250px;
  margin: 0 auto;
}

.carousel-nav .issue img {
  display: block;
  width: 100%;
  cursor: grab;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 1;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}

.slick-disabled {
  opacity: .5;
}

JavaScript

$('.carousel').slick({
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  asNavFor: '.carousel-nav',
  prevArrow: '<button class="slick-prev">&#10094;</button>',
  nextArrow: '<button class="slick-next">&#10095;</button>',
});

$('.carousel-nav').slick({
  infinite: false,
  focusOnSelect: true,
  arrows: false,
  slidesToShow: 3,
  asNavFor: '.carousel',
});