JSFiddle - React, Tailwind, and code Playground

HTML

<div class="layout selected"  style="background-image:url('http://www.hdwallpapersarena.com/wp-content/uploads/2012/07/Download-Hulk-HD-Wallpaper-For-Computer.jpg');"></div>
  
<div class="layout" style="background-image:url('http://www.hdwallpapersarena.com/wp-content/uploads/2012/07/dark_game_scene-HD-1080p.jpg');"></div>
  
<div class="layout" style="background-image:url('http://www.imgbase.info/images/safe-wallpapers/video_games/starcraft/9438_starcraft.jpg');"></div>

<div class="layout disabled" style="background-image:url('http://www.imgbase.info/images/safe-wallpapers/video_games/starcraft/9438_starcraft.jpg');"></div>

CSS

.layout { left:100%; 
  position:absolute; 
  width:100%; 
  height:100%;
  background-size:cover;
		transition:all 400ms ease-out;
		-moz-transition:all 400ms ease-out;
		-webkit-transition:all 400ms ease-out;
		-o-transition:all 400ms ease-out;
}
.layout.selected { left:0%;}
.layout.left { left:-100%; }

JavaScript

$(".layout").click(function() {

  if($(this).next().hasClass("layout") && !$(this).next().hasClass("disabled"))    $(this).removeClass("selected").addClass("left").next().removeClass("left").addClass("selected");
  else 
 $(this).removeClass("selected").prev().removeClass("left").addClass("selected");
});