Image Slider II (not working correctly) /

by asdf

HTML

<body>
	<div class="slider-container">
	</div>  
</body>

CSS

/* Remove padding and margin */
html, body, div, span, a, img, strong, ul, li{
	margin: 0;
	padding: 0;
	border: 0;
}
ul {
	list-style: none;
}
/* Remove border around linked images */
img {
	border: 0;
}
/* =Typography*/
*{
	font-size:100.01%
}
html {
	font-size:62.5%;
}
body{
	background:#ffffff;
	font:14px Arial, Verdana, Helvetica, Tahoma, "Trebuchet MS", sans-serif;
	color:#878787;
}
/* =Headings
-----------------------------------------------------------------------------*/

/* =Links
-----------------------------------------------------------------------------*/

/* =Branding
-----------------------------------------------------------------------------*/

/* =Main
-----------------------------------------------------------------------------*/
.slider-container{
    position:relative;
    width:50em;
	
	margin:20px 0 0 150px;
}
.slider-inner {
	overflow: hidden;
	background-color: #f0f0f0;
	background-color: rgba(240,240,240, 0.5);
	padding:5px 0;
}  
.slider-ul {
	list-style-type: none;
/*	position:relative;  */
/*	left:40px; */
/*	padding-bottom:10px;*/
	width:9999px; /* important */  
}  
.slider-ul li{  
	float: left;
	/*width:200px;  /* fixed width */   
	padding:0;  
	height:15em;  
	background: #c0c0c0;  
	margin:0 5px;
	box-shadow: 0 0 3px 1px #C0C0C0;
}
.slider-ul li img {  
	cursor:pointer;
	border:0px; 
	height:100%;
}  
.scroll-left, .scroll-right{  
	height:100%;  
	width:41px;
	background-color:#c0c0c0; 
	background-color:rgba(192, 192, 192, 0.5);
	position:absolute;
	z-index:5;
    top:0;
}
.scroll-left{
    left:0;
}
.scroll-right{  
    right:0;
}
.scroll-left img, .scroll-right img{
	cursor: pointer;  
	position:relative;
    top:50%;
	margin-top:-43px;
}

JavaScript

function initSlider(){
	var img_urls = ["http://farm4.static.flickr.com/3328/3575375564_79ab90dca8_b.jpg", 
				"http://farm4.static.flickr.com/3163/2505235306_b456603cf3_b.jpg", 
				"http://farm4.static.flickr.com/3235/2925947121_8b1f95c95b_b.jpg", 
				"http://farm3.static.flickr.com/2769/4481220450_91b0aa9e99_b.jpg", 
				"http://farm1.static.flickr.com/118/299048945_faba1a6a4b_b.jpg", 
				"http://blogs.roanoke.com/thehappywag/files/2012/12/KG_Cats_08.jpg", 
				"http://images2.fanpop.com/image/photos/9900000/Cat-Wallpaper-big-cats-9998497-1920-1440.jpg", 
				"http://www.wallpaperdev.com/stock/big-cats-snow-leopard.jpg"];
	
	var $slider = $('.slider-container');
	var $slider_body = $('<div class="scroll-left"><img src="images/grey_arrow_left.png" alt="Grey left arrow" /></div><div class="slider-inner"><ul class="slider-ul"></ul></div><div class="scroll-right"><img src="images/grey_arrow_right.png" alt="Grey right arrow" /></div>');
	//var $slider_img = $('<li><a href="#"><img src="" alt="" /></a></li>');
	$slider.append($slider_body);
	
	$slider_ul = $('.slider-ul');
	$slider_start = $('.slider-ul li:first');
	$slider_end = $('.slider-ul li:last');
	var start_set = [];
	for(var i=0; i<=4; i++){
		start_set.push('<li><a href="#"><img src="'+ img_urls[i] + '" alt="" /></a></li>');
	}
	var start = 0; end = 4;
	$slider_ul.append(start_set);
	$sroll_right = $('.scroll-right img');
	$sroll_left = $('.scroll-left img');
	$sroll_right.click(function(){
		if(start === img_urls.length-1){
			start = 0;
		}else start++;
		if(end === img_urls.length-1){
			end = 0;
		}else end++;
		$slider_ul.append('<li><a href="#"><img src="'+ img_urls[end] + '" alt="" /></a></li>');
		$('.slider-ul li:first').remove();
	});
	$sroll_left.click(function(){
		if(start === 0){
			start = img_urls.length-1;
		}else start--;
		if(end === 0){
			end = img_urls.length-1;
		}else end--;
		$slider_ul.prepend('<li><a href="#"><img src="'+ img_urls[start] + '" alt=""...