JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mask">
<ul class="images">
   <li>
      <img width="270" src="https://media.azpm.org/master/image/2019/1/4/hero/lromoon.jpg" />
   </li>
   <li>
      <img width="270" src="https://astrologyking.com/wp-content/uploads/full-moon-800x450.jpg" />
   </li>
    <li>
      <img width="270" src="https://cdnb.artstation.com/p/assets/images/images/001/572/835/large/tuomas-kankola-moon-disp-v001-0001.jpg?1448822300" />
   </li>
   <li>
      <img width="270" src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/PXLUyHH/animation-of-moon-with-halo-moving-from-backward-to-forward_hean1x9wx_thumbnail-full01.png" />
   </li>
   <li>
      <img width="270" src="https://tribktla.files.wordpress.com/2017/03/pan2.jpg?quality=85&strip=all&strip=all" />
   </li>
</ul>
</div>

<ul class="triggers">
   <li>0</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

CSS

body { background-color:#000; position:relative; font-size:14px; font-family:arial;}
.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
ul.images { position:relative; top:0px;left:0px; }
  ul.images li { float:left; }

ul.triggers { position:absolute; top:310px; left:80px; }
    ul.triggers li { 
        float:left; margin:0 5px; font: bold 16px arial; cursor:pointer;
        background-color:#ccc; color:#000; padding:10px;
    }ul.triggers li.selected {background-color:red; color:#000;}


.control {position:absolute; top: 380px; color:#fff; cursor:pointer;}
.prev { left:120px; }
.next { left:180px; }

JavaScript

var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var mask = $('.mask ul.images');
var imgWidth = images.width();
var target;

triggers.first().addClass('selected');
mask.css('width', imgWidth*(lastElem+1) +'px');

function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('selected').eq(target).addClass('selected');
}

triggers.click(function() {
    if ( !$(this).hasClass('selected') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});
$('.next').click(function() {
    target = $('ul.triggers li.selected').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.selected').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});
function sliderTiming() {
    target = $('ul.triggers li.selected').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}