JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>slick slider</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


  <link rel="stylesheet" href="css/style.css">


</head>

<body>

  <nav class="nav2">
    <div class="banner animated"><img class="hero-image" src="https://picsum.photos/1080/200/?random"></div>
    <div class="nav-bar"> <label for="show-menu" class="show-menu">Show Menu</label>
      <input type="checkbox" id="show-menu" role="button">
      <ul id="menu" class="ul2">
        <li class="li2"><a href="#" class="a2">Home</a></li>
        <li class="li2">
          <a href="#" class="a2">About</a>
        </li>
        <li class="li2">
          <a href="#" class="a2">Portfolio</a>
        </li>
        <li class="li2"><a href="#" class="a2">News</a></li>
        <li class="li2"><a href="#" class="a2">Contact</a></li>
      </ul>
    </div>
  </nav>
  <section class="cd-hero">

    <ul class="cd-hero-slider autoplay">

      <li class="selected" style="background-color:#3498db">
        <div class="cd-full-width">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>
      </li>

      <li style="background-color:#34495e">
        <div class="cd-half-width">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>

        <div class="cd-half-width cd-img-container">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>
      </li>

      <li style="background-color:#e67e22">
        <div class="cd-half-width cd-img-container">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
    ...

CSS

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #2c343b;
  background-color: #f2f2f2;
}

a {
  color: #d44457;
  text-decoration: none;
}

img {
  max-width: 100%;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.cd-hero {
  height: 300px;
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgba(0, 0, 0, 0.03);
}

.cd-hero-slider {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.cd-hero-slider li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.cd-hero-slider li.selected {
  /* this is the visible slide */
  position: relative;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-slider li.move-left {
  /* slide hidden on the left */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}

.cd-hero-slider li.is-moving,
.cd-hero-slider li.selected {
  /* the is-moving class is assigned to the slide which is moving outside the viewport */
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
}


/* --------------------------------

Single slide style

-------------------------------- */

.cd-hero-slider li {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cd-hero-slider...

JavaScript

var slidesWrapper = $('.cd-hero-slider');

//check if a .cd-hero-slider exists in the DOM
if (slidesWrapper.length > 0) {

  var sliderNav = $('.cd-slider-nav');
  var slidesNumber = slidesWrapper.children('li').length;
  var visibleSlidePosition = 0;
  var autoPlayId;
  var autoPlayDelay = 5000;

  // autoplay slider
  setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);

  // change visible slide
  sliderNav.on('click', 'a', function(event) {
    event.preventDefault();

    var selectedItem = $(this);

    if (!selectedItem.hasClass('selected')) {

      // if it's not already selected
      var selectedPosition = selectedItem.index();
      var activePosition = slidesWrapper.find('li.selected').index();

      if (activePosition < selectedPosition) {
        nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
      } else {
        prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
      }

      //this is used for the autoplay
      visibleSlidePosition = selectedPosition;

      updateSliderNavigation(sliderNav, selectedPosition);
      setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
    }
  });
}

function nextSlide(visibleSlide, container, pagination, n) {
  visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
    visibleSlide.removeClass('is-moving');
  });

  container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
}

function prevSlide(visibleSlide, container, pagination, n) {
  visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
    visibleSlide.removeClass('is-moving');
  });

  container.children('li').eq(n).addClass('selected...