Image Slider Test / jQuery /

by asdf

HTML

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

CSS

.slider-container{
    position:relative;
    width:40em;
	
	margin:20px 0 0 500px;
}
.slider-inner {
	/*overflow: hidden;  /* important, hide the items outside the div */   
	background-color: #f0f0f0;
	background-color: rgba(240,240,240, 0.5);
	padding:5px 0;
    display:inline-block;
}  
.slider-ul {
	list-style:none; /* removing the default styling for unordered list items */  
	position:relative;
	left:0; 
	width:9999px; /* important */ 
    padding:0;
    margin:0;
}  
.slider-ul li{  
	float: left; /* important for inline positioning of the list items */  
	padding:0;  
	height:10em;  
	background: #c0c0c0;  
	margin:0 5px;
	box-shadow: 0 0 3px 1px #C0C0C0;
}
.slider-ul li img {  
/*	.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
	cursor:pointer;
	border:0; 
	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{  
/*styling*/  
	cursor: pointer;  
	position:relative;
    top:50%;
	margin-top:-43px;
}

JavaScript

function initSlider(){
	var imgUrls = ["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://img.izismile.com/img/img2/20090722/bonus//4/big_cats_45.jpg", 
				"http://img.izismile.com/img/img2/20090722/bonus//4/big_cats_11.jpg", 
				"http://2.bp.blogspot.com/_b33mTm0c2rA/TJ2oDQhZGoI/AAAAAAAAAIM/36xdNKLer0s/S1600-R/nature-snow-leopard.png"];
	
	var $slider = $('.slider-container');
	var slider_body = $('<div class="scroll-left"><img src="http://www.nimbus.se/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="http://www.nimbus.se/Images/grey_arrow_right.png" alt="Grey right arrow" /></div>');
	$slider.append(slider_body);
	
	var $sliderUl = $('.slider-ul');	
	var containerWidth = $slider.outerWidth();
	var containerPosition = $slider.offset();
	var containerCenter = containerPosition.left + containerWidth/2;
	
	var rightCentralItemIndex = 3;
	var leftCentralItemIndex = 1;
    var lastIndex = 4;
	
	var startItem = 0, endItem = 4;
	function getLeftIndent(centralItemIndex){
		var startSet = $('.slider-ul li');
		var centeredItem = $(startSet[centralItemIndex]);
		var itemPosition = centeredItem.offset();
		var itemCenter = itemPosition.left + centeredItem.outerWidth(true)/2;
		var tempLeftIndent = parseInt($sliderUl.css('left')) - (itemCenter - containerCenter);
		return tempLeftIndent;
	}
	
	var counter = 0;
	function imageCallback(){
		counter++;
		if(counter === 4){
			$sliderUl.css({'left' : getLeftIndent(2)});
		}
	}
	
	var startSet = [];
	for(var i=0; i<=4; i++){
		var li = $('<li><a href="#"><img src="'+ imgUrls[i] + '" alt=""...