JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gallery">
    <div id="slider">
        <img src="http://imgur.com/2R13b.jpg" title="First" alt="hah" />
        <img src="http://imgur.com/3Hoym.jpg" title="Second" alt="blah" />
        <img src="http://imgur.com/xaeQ6.jpg" title="Okay" alt="hmm" />
    </div>
</div>

CSS

#gallery #slider img {
    margin:0;
    border:0;
    padding:0; }
#slider {
    position: relative; 
    width: 800px; }

JavaScript

$(function() {
      // Variable to keep track of image showing
    var showing = 0;
    
      // store all images in an array
    var imgs = [];
    imgs = $("#gallery img").toArray();

      // Variable to store number of images
    var numberOf = imgs.length;
    
      // Remove all but first image from DOM
      // I clear the slider to get rid of all whitespace
    $("#slider").html("");
    $("#slider").html(imgs[0]);
    
      // Recursive next image function
    var nextImage = function() {
                
          // Add next image
        $("#slider").append(imgs[++showing % numberOf]);
        
          // Animate the slider
        $("#slider").animate({
            left: '-=200'
        }, 2000, function() {
            
              // Remove image to the left
            $("#slider img:first").remove();
            
              // Reset CSS
            $("#slider").css("left", "0px");
            
              // Call animationg function again
            setTimeout(function() {nextImage(); }, 1000);
        });  
    }
        
      // Call next image for the first time
    nextImage();           
});