JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="scene">
	  <li class="active"><img src="http://s4.goodfon.ru/image/340586-2048x1365.jpg"></li>
	  <li class="non"><img src="http://wpapers.ru/wallpapers/All/6130/1920x1200_Нарисованный-Пейзаж-Японии.jpg"></li>
	  <li class="non"><img src="http://wallpaper.zoda.ru/bd/2007/02/10/00c77aa4005ddb3f09350267ea54a68d.jpg"></li>
	</ul>
	
	<a href="#" id="trigger" style="margin-left: 47%">Trigger</a>

CSS

* {
  padding: 0;
  margin: 0;
}

html, body {
  position: relative;
  width: 100%;
  height: 100%;
}

body {
  min-height: 100%;
}

#scene {
  position: relative;
  overflow: hidden;
  width: 900px;
  height: 500px;
  margin: auto;
}
#scene li {
  position: absolute;
  list-style-type: none;
  float: left;
  display: inline-block;
  width: 100%;
  height: 100%;
  top: 0;
}
#scene li.non {
  left: 100%;
}

JavaScript

$("#trigger").click(function(e){

			e.preventDefault();

			var active = $(".active").removeClass('active')
									 .next()
									 .animate({"left":"0"})
									 .addClass('active')
									 .removeClass("non");

			if(active.length === 0) $("#scene").find("li").eq(0).animate({"left":"0"}).addClass('active').removeClass("non");

		});