JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.matthewruddy.com/slider-intervalissue/jquery.easing.js"></script>
<div class="slider-wrap">
<ul class="slider">
<li style="background: url(http://www.matthewruddy.com/slider-intervalissue/images/image1.jpg) no-repeat;"></li>
<li style="background: url(http://www.matthewruddy.com/slider-intervalissue/images/image2.jpg) no-repeat;"></li>
<li style="background: url(http://www.matthewruddy.com/slider-intervalissue/images/image3.jpg) no-repeat;"></li>

</ul>
</div>

<div id="next">Next image</div>

CSS

.slider-wrap {
  overflow: hidden;
  width: 500px;
  height: 200px;
}
.slider
{
  position: relative;
  height: 200px;
  margin: 0;
  padding: 0;
}
.slider li
{
  float: left;
  width: 500px;
  height: 200px;
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}

JavaScript

$(document).ready(function(){
var images = $('.slider li');
var slides = images.length;
var sliderwidth = 500;
var currentimage = 0;
var containerwidth =  sliderwidth*slides;
var autoplay = 4000;

$('.slider').css('width', containerwidth);

$('#next').bind('click',nextimage);

function nextimage(autoplay){
if(currentimage<slides-1){
currentimage++;
$('.slider').animate({left:-sliderwidth*(currentimage)},{duration:800,easing:'easeInOutCubic'});
    
}
else{
currentimage = 0;
$('.slider').animate({left:0},{duration:800,easing:'easeInOutCubic'})
}
    if (autoplay) { setTimeout(function() { nextimage(true); }, 4000); }
};
    
    setTimeout(function() { nextimage(true); }, 4000);

});