JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div class="slider">
  <img src="https://istanbulclues.com/wp-content/uploads/2016/07/Istanbul-Blue-Mosque-Overview-690jpg" alt="Istanbul" class="img js-show">x460.
  <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=http%3A%2F%2Fcdn-image.travelandleisure.com%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1600x1000%2Fpublic%2F1513186027%2Fmadrid-spain-EUROPEROUTES1217.jpg%3Fitok%3DcBB6JhNC&w=700&q=85" alt="Madrid" class="img">
  <img src="http://2.bp.blogspot.com/-d20p7uaz2pQ/U1o7H7Dc1FI/AAAAAAAADwg/Pr85OY1B1jo/s1600/capilano-004.jpg" alt="Capilano" class="img">
  <img src="https://positivr.fr/wp-content/uploads/2015/08/recyclage-dechets-san-francisco-1.jpg" alt="San Francisco" class="img">
  <img src="https://www.muskimagazin.rs/image.php/muski-magazin-putovanja-barselona-top-destinacija%20(12).jpg?width=600&image=https://www.muskimagazin.rs/chest/gallery/barselona-top-destinacija/muski-magazin-putovanja-barselona-top-destinacija%20(12).jpg"
    alt="Barselona" class="img">

  <button class="arrow prev"><i class="fas fa-chevron-left"></i></button>
  <button class="arrow next"><i class="fas fa-chevron-right"></i></button>

  <!-- Dots -->
  <ul class="dots">
    <li class="dot current"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
  </ul>
</div>

CSS

.slider {
  width: 600px;
  height: 375px;
  margin: 0 auto;
  border: 1px solid #f1f0f0;
  overflow: hidden;
  position: relative;
}

.slider img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: cover;
  display: none;
}

.slider .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #000;
  font-size: 2em;
  margin-left: 10px;
  z-index: 10;
  outline: none;
  cursor: pointer;
}

.slider .prev {
  left: 5px;
}

.slider .next {
  right: 15px;
}

.slider .dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  margin: 0;
}

.slider .dots .dot {
  display: inline-block;
  background: #000;
  width: 15px;
  height: 15px;
  z-index: 10;
  border-radius: 50px;
}

.slider .dots .current {
  background: red;
}

.img.js-show {
  opacity: 1;
  z-index: 1;
  display: block;
}

/*# sourceMappingURL=style.css.map */

JavaScript

// Variables
var slides = document.querySelectorAll('.slider img');
var prevSlide = document.querySelector('.prev');
var nextSlide = document.querySelector('.next');
var dots = document.querySelectorAll('.dot');
var currentSlide = 0;

prevSlide.onclick = function() {
  prev();
};

nextSlide.onclick = function() {
  next();
};

// set interval
setInterval(function() {
  next();
}, 6000);


function prev() {
  if (currentSlide == 0) {
    currentSlide = slides.length - 1;
  } else {
    currentSlide--;
  }

  document.querySelector('.img.js-show').classList.remove('js-show');
  slides[currentSlide].classList.add('js-show');

  document.querySelector('.dot.current').classList.remove('current');
  dots[currentSlide].classList.add('current');
}


function next() {
  if (currentSlide == slides.length - 1) {
    currentSlide = 0;
  } else {
    currentSlide++;
  }

  document.querySelector('.img.js-show').classList.remove('js-show');
  slides[currentSlide].classList.add('js-show');

  document.querySelector('.dot.current').classList.remove('current');
  dots[currentSlide].classList.add('current');
}


// click on dots change slide and dot
for (var i = 0; i < dots.length; i++) {
  dots[i].onclick = function() {
    if (document.querySelector('.dot.current')) {
      document.querySelector('.dot.current').classList.remove('current');
    }
    this.classList.add('current');
  }
}

for (var j = 0; j < slides.length; j++) {
  slides[j].onclick = function() {
    if (document.querySelector('.img.js-show')) {
      document.querySelector('.img.js-show').classList.remove('js-show');
    }
    this.classList.add('js-show');
  }
}