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 if each...

SCSS

@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: 580px;
    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: 500px;
    position: relative;
}
.slideContainer {
	 background-color: #DEDFCC;
    padding: 10px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.slide {
    width: 100%;
    height: 500px;
    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: 100%;
    height: 80%;
    padding: 10px;
}
.slideNav {
    width: 100%;
    padding: 10px;
    background-color: #C9B7B7;
    color: #DEDFCC;
	position:relative;
}
.prevSlide {
    width: 33.3%;
    float: left;
}
.nextSlide {
    width: 33.3%;
    float: right;
    text-align: right;
}
.slideCount {
    width: 23.3%;
    text-align: center;
	position:absolute;
	left:40%;
}
.slideCredit {
    width: 100%;
    font-style: italic;
    font-size: 12px;
}
.fix {
    clear: both;
}

CoffeeScript

$('.slideCount').each(function(){
		var text='1/'+$(this).parents('div.postContainer').find('.slideContainer').length
		$(this).text(text)
		})
		
	$('.nextSlide').show()	
	$('.prevSlide').hide()
 
    $('div.nextSlide').click(function (e){
		var count=parseInt($(this).siblings('.slideCount').text())
		var slideshow=$(this).parents('div.postContainer').find('.slideshow')
		var slides = $(slideshow).children().length;
		if(count===slides){
			e.preventDefault()
		    }else{
			count++
			$(this).parents('div.postContainer').find('div.slideContainer:first').appendTo(slideshow) 
			$(this).siblings('.slideCount').text(count+'/'+slides)
		}
		if(count===slides){$(this).hide()}else{$(this).parent().find('div.prevSlide').show()}
    });
	
    $('.prevSlide').click(function (e){
		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){e.preventDefault()}else{
			count--
			$(this).parents('div.postContainer').find('div.slideContainer:last').prependTo(slideshow) 
			$(this).siblings('.slideCount').text(count+'/'+slides)
		} 
		if(count===1){$(this).hide()}else{$(this).parent().find('div.nextSlide').show()} 
    });