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;
    z-index: 2;
    -webkit-transition: all 2s ease;                  
}
.slideshow img:first-child {
    right: 0px;
}

JavaScript

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

function changeSlide(i, items) {
    setTimeout(
      function() 
      {
          var prevIndex = i == 0 ? items.length - 1 : i-1;
          var currentItem = items.eq(i);
          var prevItem = items.eq(prevIndex);
          var zIndex = Number(prevItem.css('z-index'));
                    
          prevItem.css("right", currentItem.width());
          currentItem.css("z-index", zIndex + 1).css("right", 0);
          setTimeout(function() {
              items.filter(':not(:eq(' + i + '),:eq(' + prevIndex + '))').css("right", -200);},
          500);
          changeSlide(i == items.length - 1 ? 0 : i+1, items);
      }, 2500);    
}