JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#gallery {
    width:200px;
    height:200px;
    overflow:hidden; 
    border:5px solid #000;
}
#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]);    
      // Add title text div
    $("#gallery").after('<a id="title"/>');    
      // Recursive next image function
    var nextImage = function() {                
          // Add next image (only use increment once!)
        $("#slider").append(imgs[++showing % numberOf]);
          // Show image title
        $("#title").html($(imgs[showing % numberOf]).attr("title"));
          // Link to original
        $("#title").attr("href", $(imgs[showing % numberOf]).attr("src"));        
          // 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();           
});