JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick-theme.css">
<div class="content">TEXT
</div>

<div class="button next">NEXT</div>
<div class="button prev">PREV</div>

<div class="slider">
  <div class="slide s1">SLIDE 1</div>
  <div class="slide s2">SLIDE 2</div>
  <div class="slide s3">SLIDE 3</div>
</div>

SCSS

body {
  font-family: sans-serif;
  color: #FFF;
}

.content {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50vw;
  height: 100vh;
  background: #576986;
  text-align: center;
  line-height: 100vh;
  color: #FFF;
}

.slider {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: relative;
  width: 50vw;
  height: 100vh;
  background: #d0d6e6;
  background-size: cover;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  text-align: center;
  line-height: 100vh;
}

.s1 {
  background: url('https://images.unsplash.com/photo-1477346611705-65d1883cee1e?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg') no-repeat center;
  background-size: cover;
}

.s2 {
  background: url('https://images.unsplash.com/photo-1484258565861-e23bd9f33e2b?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg') no-repeat center;
  background-size: cover;
}

.s3 {
  background: url('https://images.unsplash.com/photo-1485883645744-18c5160857b9?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg') no-repeat center;
  background-size: cover;
}

.button {
  position: absolute;
  margin: auto;
  background: #FFF;
  text-align: center;
  height: 2em;
  width: 4em;
  line-height: 2em;
  cursor: pointer;
  z-index: 100;
  color: #456;
}

.next {
  bottom: 0;
  right: 0;
}

.prev {
  bottom: 0;
  left: 0;
}

JavaScript

$(function() {

  $('.slider').slick({
    dots: false,
    //lazyload: 'ondemand',
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 1500,
    cssEase: 'ease',
    accessibility: false
  });

});

var colors = ['#576986', '#D0D5D6', '#DFDEE5']

var current = colors[0];

$('.next').click(function() {
  $('.slider').slick('slickNext');
});

$('.prev').click(function() {
  $('.slider').slick('slickPrev');
});