JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://responsivefilemanager.com/fancybox/jquery.fancybox-1.3.4.css">
<link rel="stylesheet" href="http://responsivefilemanager.com/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://responsivefilemanager.com/assets/css/bootstrap-responsive.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://responsivefilemanager.com/assets/js/bootstrap.min.js"></script>
<script src="http://responsivefilemanager.com/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script src="http://responsivefilemanager.com/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<div id="slider" class="slider">
  <div class="wrapper">
    <div id="items" class="items">
      <span class="slide"><img src="https://tinyurl.com/y3j7p2n3"/></span>
      <span class="slide"><img src="https://tinyurl.com/3s46u7hp"/></span>
      <span class="slide"><img src="https://tinyurl.com/2p93x6yu"/></span>
    </div>
  </div>
  <a id="prev" class="control prev"></a>
  <a id="next" class="control next"></a>
</div>

CSS

.slider {
  width: 300px;
  height: 200px;
}
.wrapper {
  overflow: hidden;
  position: relative;
  background: #222;
  z-index: 1;
}
#items {
  width: 10000px;
  position: relative;
  top: 0;
  left: -300px;
}
#items.shifting {
  transition: left .2s ease-out;
}
.slide {
  width: 300px;
  height: 200px;
  cursor: pointer;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 1s;
  position: relative;
}

.control {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 20px;
  margin-top: -20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.prev,
.next {
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.prev {
  background-image: url(ChevronLeft.png);
  left: -20px;
}
.next {
  background-image: url(ChevronRight-512.png);
  right: -20px;
}
.prev:active,
.next:active {
  transform: scale(0.8);
}

JavaScript

var slider = document.getElementById('slider'),
    sliderItems = document.getElementById('items'),
    prev = document.getElementById('prev'),
    next = document.getElementById('next');
slide(slider, sliderItems, prev, next);
function slide(wrapper, items, prev, next) {
  var posX1 = 0,
      posX2 = 0,
      posInitial,
      posFinal,
      threshold = 100,
      slides = items.getElementsByClassName('slide'),
      slidesLength = slides.length,
      slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
      firstSlide = slides[0],
      lastSlide = slides[slidesLength - 1],
      cloneFirst = firstSlide.cloneNode(true),
      cloneLast = lastSlide.cloneNode(true),
      index = 0,
      allowShift = true;
  
  // Clone first and last slide
  items.appendChild(cloneFirst);
  items.insertBefore(cloneLast, firstSlide);
  wrapper.classList.add('loaded');
  
  // Mouse and Touch events
  items.onmousedown = dragStart;
  
  // Touch events
  items.addEventListener('touchstart', dragStart);
  items.addEventListener('touchend', dragEnd);
  items.addEventListener('touchmove', dragAction);
  
  // Click events
  prev.addEventListener('click', function () { shiftSlide(-1) });
  next.addEventListener('click', function () { shiftSlide(1) });
  
  // Transition events
  items.addEventListener('transitionend', checkIndex);
  
  function dragStart (e) {
    e = e || window.event;
    e.preventDefault();
    posInitial = items.offsetLeft;
    
    if (e.type == 'touchstart') {
      posX1 = e.touches[0].clientX;
    } else {
      posX1 = e.clientX;
      document.onmouseup = dragEnd;
      document.onmousemove = dragAction;
    }
  }
  function dragAction (e) {
    e = e || window.event;
    
    if (e.type == 'touchmove') {
      posX2 = posX1 - e.touches[0].clientX;
      posX1 = e.touches[0].clientX;
    } else {
      posX2 = posX1 - e.clientX;
      posX1 = e.clientX;
    }
    items.style.left = (items.offsetLeft - posX2) + "px";
  }
  
  function...