JSFiddle - React, Tailwind, and code Playground

HTML

<div class="holder">
    <div class="prev-slide"></div>
    <div class="sliderholder">
        <div id="slider">
            <div class="imagestrip">
                <!--img src="http://thoughtrender.com/music2/images/thr_imagestrip_400.jpg" alt="THR-015 Album Cover"/-->
             </div>	
        </div>
    </div>
    <div class="next-slide"></div>
</div>

CSS

html, body {
  	height: 100%;
  	width: 100%;
  	padding: 0;
  	margin: 0;
    font-size: 1em;
    line-height: 1.4;

 	background:black url(http://thoughtrender.com/music2/images/home_bk_sm.jpg) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.sliderholder {
	position:relative;
    width: 60%;
    padding-bottom: 60%;
	left:0;
	right:0;
	margin-left: auto;
    margin-right: auto;
	border-style:solid;
	border-width:thick;
	border-color:#fff;
}

#slider {
	position:absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin:0;
}

.imagestrip {
	position: relative;
    height: 100%;
	margin: 0; 
	padding: 0; 
	font-size: 0;
    transition: background-position 0.5s ease;
    -webkit-transition: background-position 0.5s ease;
    -moz-transition: background-position 0.5s ease;
    -o-transition: background-position 0.5s ease;
	background-image:url(http://thoughtrender.com/music2/images/thr_imagestrip_400.jpg);
	background-size:cover;
	
}
.imagestrip img {
	opacity:1;
    width: auto;
    height: 100%;
    max-height: 100%;
}

.holder {
	position:absolute;
	opacity:1;
	width:100%;
	height:100%;
	margin-top:10px;
	text-align:center;
	color:#fff;
}

.prev-slide {
	opacity:.2;
    width: 55px;
    height: 195px;
    position: absolute;
    top: 100px;
    left: 5px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    z-index: 3;
	background:url(http://thoughtrender.com/music2/images/arrow_left.svg) center center no-repeat;
	background-size:contain;
	
}

.no-svg .prev-slide {
	width:46px;
	height: 195px;
	background:url(http://thoughtrender.com/music2/images/arrow_left.png)
}

.next-slide {
    width: 55px;
    height: 195px;
    position: absolute;
    top: 100px;
    right: 5px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    z-index: 3;
   ...

JavaScript

$(document).ready(function() {
	var showNav = $('.toggle-nav');
	var nextSlide = $('.next-slide');
	var prevSlide = $('.prev-slide');
	var imageStrip = $('.imagestrip');
	var imageStripImg = $('.imagestrip img');
	var currentReleaseItem = 0;
	var selectedPlaylist =0;
	var showPrev = false;
	var showNext = true;
	var audioPlayer=$('#audioplayer');
	//the current track playing in a release
	var currentTrack = 0;
	//determines if the next track in a release should begin when current track ends
	var shouldPlayNext = true;
	
	

	
	nextSlide.click(function(){
		if(currentReleaseItem < 8){
			changeImage(1);
		}
	});
	
	prevSlide.click(function(){
		if(currentReleaseItem > 0){
			changeImage(-1);
		}
	});
	
	function changeImage(direction){
		
			currentReleaseItem += direction;
		
			
			//handle opacity of previous and next buttons
			if(!showPrev && currentReleaseItem > 0){
				showPrev = true;
				prevSlide.css('opacity',.7);
			}
			
			if(showPrev && currentReleaseItem < 1){
				showPrev = false;
				prevSlide.css('opacity',.3);
			}

			if(showNext && currentReleaseItem > 7){
				showNext = false;
				nextSlide.css('opacity',.3);
			}
			
			if(!showNext && currentReleaseItem < 8){
				showNext = true;
				nextSlide.css('opacity',.7);
			}			
			
			var newX = -imageStrip.height() * currentReleaseItem;
			imageStrip.css('background-position', newX+'px 0');
			
		
	};
	
	setTimeout(function(){
		$('header h1').css('opacity',1);
		imageStripImg.css('opacity', 1);
		
		//fix for scale on android 2.3//
		if($(window).width() === 427)
		{
			//insert message here
		};
		imageStripImg.css("height", $(window).width()*.6);
		
		
		
		
		
	},1000);
	/*
	$( window ).resize(function() {
		//fix for scale on android 2.3//
		if($(window).width() < 480)
		{
			imageStripImg.css("height", $(window).width()*.6);
		}
		else
		{
			imageStripImg.css('height', '100%');
		}
	});
	*/
});