JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slides">
    <div class="slide"></div>
</div>
<button>add one</button>

CSS

* {
    position: relative;
    box-sizing: border-box;
}

#slides, .slide {
    width: 320px;
    height: 240px;
    overflow: hidden;
    background: gray;
}

.slide {
    background-color: #369;    
}

JavaScript

$('button').on('click', function(event)
  {
    $.when( $('#slides').append('<div class="slide"></div>') ).done(function()
      {
        $('.slide:first').animate(
          { left: -($('.slide:first').outerWidth(true)) + 'px' },
          {
            duration: 500,
            done: function(promise, jumped) { $(this).remove(); }
          }
        )
      }
    );
  }
);