JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/kenwheeler/slick/master/slick/slick.min.js"></script>
<h1>Goal: Slide each image once, then do nothing more</h1>
<div class="slideshow" style="height: 100px; width: 200px; overflow: hidden;">
    <img src="http://lorempixel.com/200/100" />
    <img src="http://lorempixel.com/200/101" />
    <img src="http://lorempixel.com/200/102" />
</div>

CSS

body {
    background: blue;
    color: white;
}
.slideshow {
    background: white;
    position: relative;
}
.slideshow img {
    position: absolute;
    top: 0;
    right: -200px;
    width: 200px;
    height: 100px;
    -webkit-transition: all 2s ease;        
    -moz-transition: all 2s ease;           
}
.slideshow img:first-child {
    right: 0px;
}

JavaScript

changeSlide(1, $(".slideshow img"));

function changeSlide(i, items) {
    setTimeout(
      function() 
      {
          var currentItem = items.eq(i),
            prevItem = items.eq(i-1);
          
          prevItem.css("right", prevItem.width());
          currentItem.css("right", 0);
          
          changeSlide(i+1, items);
      }, 2000);    
}