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">

  <dl class="row mt-3 mb-3">

    <dt class="col-4">Foreword</dt>
    <dd class="col-8">Carmelo Ezpeleta – CEO Dorna Sports</dd>

    <dt class="col-4">The Season</dt>
    <dd class="col-8">An overview by Mat Oxley</dd>

    <dt class="col-4">Technical Review</dt>
    <dd class="col-8">Mat Oxley</dd>

    <dt class="col-4">The Bikes</dt>
    <dd class="col-8">A two-page focus on each of the bikes from Aprilia, Ducati, Honda, KTM, Suzuki, and Yamaha</dd>

    <dt class="col-4">The Riders</dt>
    <dd class="col-8">A detailed account of each rider’s season</dd>

    <dt class="col-4">The Races</dt>
    <dd class="col-8">Eight-pages per MotoGP round report including detailed results data</dd>

    <dt class="col-4">Moto2</dt>
    <dd class="col-8">A five-page season round-up</dd>

    <dt class="col-4">Moto3</dt>
    <dd class="col-8">A five-page season round-up</dd>

    <dt class="col-4">Red Bull Rookies Cup</dt>
    <dd class="col-8">The season in review</dd>

    <dt class="col-4">Two Wheels for Life</dt>
    <dd class="col-8">Update on the year</dd>

    <dt class="col-4">Champions</dt>
    <dd class="col-8">A history of Grand Prix Champions</dd>

  </dl>

</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',
});