JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-rolling">
  <div class="visible">
    <div class="dragme">
      <div class="images">
        <img src="http://lorempixel.com/400/200/sports/1" />
      </div>
      <div class="images">
        <img src="http://lorempixel.com/400/200/sports/2" />
      </div>
      <div class="images">
        <img src="http://lorempixel.com/400/200/sports/7" />
      </div>
      <div class="images">
        <img src="http://lorempixel.com/400/200/sports/8" />
      </div>
      <div class="images">
        <img src="http://lorempixel.com/400/200/sports/9" />
      </div>

    </div>

  </div>

</div>

CSS

.body {
  width:960px;
  margin: 0 auto;
}
.img {
  opacity: 0;
  transition: .7s;
  position: absolute;
}
.movable {
  position: relative;
}
.slider {
  position: relative;
  height: 200px;
  margin:20px;
}
.active {
  opacity: 1;
}
.image-rolling {
  position:relative;
}
.images {
  float:left;
  width:400px;
  height:200px;
}
.visible {
  height: 200px;
  width: 400px;
  position:relative;
  overflow:hidden;
}

JavaScript

$(document).ready(function() {
	var count = $('.images').length;
	var totalWidth = 0;
	var images = $('.images');
	images.each(function() {
		totalWidth += $(this).outerWidth(true);
	})
	var height = $('.images').outerHeight(true);
	$('.dragme').css({"width": 2*totalWidth, "height": height});
	var firstImages = $('.images');
	  var dragger = setInterval(function() {
			var secondImages = firstImages.clone();
			secondImages.appendTo($('.dragme'));
			cur_margin = parseInt($('.dragme').css("margin-left"));

			margin_todo = cur_margin - totalWidth;
			if (-1*parseInt($('.dragme').css("margin-left")) >= totalWidth) {
					margin_todo = 0;
					$('.dragme').css("margin-left", 0);
			} else {
			$('.dragme').animate({
				marginLeft: -totalWidth
			}, 5000, function () {
				firstImages.remove();
			});
		}

}, 3000);
});