JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="container">
  
  <div class="postContainer">
    <h1>Liam Payne Hair Evolution</h1>
	<p>Liam Payne has perhaps gone through the most hairstyle changes of any member of 1D!  Check them out below!</p>

				<div class="slideshow">
					
			  		  
				<div class="slideContainer">
				  <div class="slide">
					<span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/2010.jpg">
				  </div>
				  <div class="slideInfo">
					<p class="slideCaption">
					  <p>2
                      Liam Payne Hair Evolution</p>
					  Please excuse these horrible captions.					</p>
					<p class="slideCredit">
					  Google					</p>
				  </div> <!--slideInfo end-->
				  <div class="fix"></div>
				</div> <!--slideContainer end-->
			   <!--end if each if-->
	  	    		
			  		  
				<div class="slideContainer">
				  <div class="slide">
					<span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/2011.jpg">
				  </div>
				  <div class="slideInfo">
					<p class="slideCaption">
					  <p>3 Liam Payne Hair Evolution</p>
					  I'm ashamed, but they're necessary...					</p>
					<p class="slideCredit">
					  Freebie					</p>
				  </div> <!--slideInfo end-->
				  <div class="fix"></div>
				</div> <!--slideContainer end-->
			   <!--end if each if-->
	  	    		
			  		  
				<div class="slideContainer">
				  <div class="slide">
					<span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/2012.jpg">
				  </div>
				  <div class="slideInfo">
					<p class="slideCaption">
					  <p>4 Liam Payne Hair Evolution</p>
					  Cutie patootie...					</p>
					<p class="slideCredit">
					  Getty					</p>
				  </div> <!--slideInfo end-->
				  <div class="fix"></div>
				</div> <!--slideContainer end-->
			   <!--end...

CSS

@import url(http://fonts.googleapis.com/css?family=Abel|Medula+One);
 body {
    background-color: #f6f6f6;
    font-family:'Abel', sans-serif;
    font-size: 17px;
    line-height: 23px;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    width: 500px;
    background-color: #ffffff;
    margin: 20px auto;
    padding: 15px;
}
.postContainer {
    width: 100%;
    margin-bottom: 20px;
}
.postContainer h1 {
    font-family:'Medula One', cursive;
    font-weight: normal;
    line-height: 46px;
    font-size: 52px;
    margin-bottom: 10px;
}
/************SLIDESHOW************/
 .slideshow {
    background-color: #DEDFCC;
    width: 100%;
    height: 320px;
    position: relative;
}
.slideContainer {
	 background-color: #DEDFCC;
    padding: 10px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.slide {
    width: 60%;
    height: 300px;
    float: left;
    text-align: center;
    background-color: #C9B7B7;
}
.slideMiddle {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.slide img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}
.slideInfo {
    width: 40%;
    height: 80%;
    float: right;
    padding: 10px;
}
.slideNav {
    width: 100%;
    padding: 10px;
    background-color: #C9B7B7;
    color: #DEDFCC;
}
.prevSlide {
    width: 33.3%;
    float: left;
}
.nextSlide {
    width: 33.3%;
    float: right;
    text-align: right;
}
.slideCount {
    width: 33.3%;
    float: left;
    text-align: center;
}
.slideCredit {
    width: 40%;
    font-style: italic;
    font-size: 12px;
}
.fix {
    clear: both;
}

JavaScript

$('.prevSlide,.nextSlide').show()	
 
    $('div.nextSlide').click(function (){
		var count=parseInt($(this).siblings('.slideCount').text())
		var slideshow=$(this).parents('div.postContainer').find('.slideshow')
		var slides = $(slideshow).children().length;
		if(count===slides){count=1}else{count++}
        $(this).parents('div.postContainer').find('div.slideContainer:first').appendTo(slideshow) 
		$(this).siblings('.slideCount').text(count+'/'+slides)
    });
	
    $('.prevSlide').click(function (){
		var count=parseInt($(this).siblings('.slideCount').text().slice(0,-2))
		var slideshow=$(this).parents('div.postContainer').find('.slideshow')
		var slides = $(slideshow).children().length;
		if(count===1){count=slides}else{count--}
        $(this).parents('div.postContainer').find('div.slideContainer:last').prependTo(slideshow) 
		$(this).siblings('.slideCount').text(count+'/'+slides)  
    });