JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="container">
		<!--<div id="header"></div>-->
		<div class="content">
			<div class="tagline">Here is where stuff will go</div>
			<div class="selector">
				<img class="slide" id="center"></img>
				<img class="slide" id="left"></img>
				<img class="slide" id="right"></img>
			</div>
			<div class="navigationLeft">Left</div>
			<div class="navigationRight">Right</div>
		</div>
		<footer>
		</footer>
	</div>
</div>
</body>

CSS

/* Site base with 900px */
body{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	background-color:#5b6166;
	margin:0px;
	padding:0px;
}
header {
	height:50px;
	width:100%;
	background-color:#323440;
	position:absolute;
	top:0px;
	left:0px;
	text-align:center;
	font-size:.85em;
	font-weight:bold;
}
.headerContent{
	width:900px;
	height:50px;
	margin:0px auto 0px auto;
}
.headerItemLeft{
	height:50px;
	line-height:50px;
	width:auto;
	float:left;
	padding:0px 15px 0px 15px;
	margin:0px auto 0px auto;
	color:white;
}
.headerItemRight{
	height:50px;
	line-height:50px;
	width:auto;
	float:right;
	padding:0px 15px 0px 15px;
	margin:0px auto 0px auto;
	color:white;
}
.content{
	width:900px;
	height:1000px;
	margin:0px auto 150px auto;
	background-color:#f5f5f5;
}
.content .tagline{
	font-size:1em;
	text-align:center;
	margin:50px 0px 0px 0px;
	padding:20px 0px 0px 0px;
	width:900px;
	height:100px;
}
.content .selector{
	width:900px;
	height:400px;
	margin:0px auto 0px auto;
	position:relative;
	overflow:hidden;
}
.selector #left{
	width:900px;
	height:400px;
	overflow:hidden;
	position:relative;
	left:-900px;
	overflow:hidden;
	z-index:2;
}
.selector #center{
	width:900px;
	height:400px;
	position:absolute;
	overflow:hidden;
	z-index:1;
}
.selector #right{
	width:900px;
	height:400px;
	overflow:hidden;
	position:relative;
	left:900px;
	top:-400px;
	overflow:hidden;
	z-index:2;
}
.content .navigationLeft{
	width:100px;
	height:100px;
	background-color:black;
	float:left;
    color:white;
}
.content .navigationRight{
	width:100px;
	height:100px;
	background-color:black;
	float:right;
    color:white;
}

JavaScript

$(document).ready(function(){
	var images = [ "http://furrydex.net/img1.png", "http://furrydex.net/img2.png" ];
	var loadedImages = [];
	var pos = 0;
    var selWidth = $('.selector').width();
	var negSelWidth = selWidth-selWidth-selWidth;
	console.log(negSelWidth);
	$.each(images, function( index, value ) {
		var img=new Image();
		img.src=value;
		loadedImages.push(img);
	});
	if(images[2] == undefined) {
		$('#left').attr('src', images[1]);
		$('#center').attr('src', images[0]);
		$('#right').attr('src', images[1]);
	} else {
		$('#left').attr('src', images[1]);
		$('#center').attr('src', images[0]);
		$('#right').attr('src', images[2]);
	}
	$('.navigationLeft').click(function() {
		console.log("yay");
		$( '#left' ).animate({
			marginLeft: selWidth
		}, 500, "linear",  function() {
			// Animation complete.
			$( '#center' ).attr('id', 'temp');
			$( '#left' ).attr('id', 'center');
			$( '#center' ).attr('id', 'left');
			$( '#left' ).css('width', '900px');
			$( '#left' ).css('height', '400px');
			$( '#left' ).css('overflow', 'hidden');
			$( '#left' ).css('position', 'relative');
			$( '#left' ).css('left:', '-900px');
			$( '#left' ).css('overflow', 'hidden');
			$( '#left' ).css('z-index', '2');
			$( '#center' ).css('width', '900');
			$( '#center' ).css('height', '400');
			$( '#center' ).css('position', 'absolute');
			$( '#center' ).css('overflow', 'hidden');
			$( '#center' ).css('z-index', '1');
		});
		//reset positions and change images

		
		
	});
	$('.navigationRight').click(function() {
		console.log("yay");
		$( '#right' ).animate({
			marginLeft: negSelWidth
		}, 500, "linear",  function() {
			// Animation complete.
		});
	});
});