Slideshow with Arrows

                        
                          <div id="slider-containeroutter">
<div id="slider-container">
<div id="slider">
			<ul>				
				<li><a href="http://templatica.com/preview/30"><img src="http://ifeanyioluoha.com/wp-content/uploads/2011/11/slide-2.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/7"><img src="http://ifeanyioluoha.com/wp-content/uploads/2011/11/slide-2.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/25"><img src="http://ifeanyioluoha.com/wp-content/uploads/2011/11/slide-2.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/26"><img src="http://ifeanyioluoha.com/wp-content/uploads/2011/11/slide-2.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/27"><img src="http://ifeanyioluoha.com/wp-content/uploads/2011/11/slide-2.jpg" alt="Css Template Preview" /></a></li>			
			</ul>
</div>
</div> 
</div>                        
                        

                        
                          /****Slide Show with Arrows Start****/

#slider-containeroutter {
    border: 1px solid;
    height: 275px;
    overflow: hidden;
}

#slider-container {
    background: none repeat scroll 0 0 #F1F2F3;
    border: 11px solid #FFFFFF;
    height: 243px;
    margin-left: auto;
    margin-right: auto;
    width: 567px;
}
 
#slider{}	
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
	
/*This Controls the width and height of the images in the slide show*/	
#slider li{ 
	width:568px;
	height:241px;
	overflow:hidden; 
	}	
	
#slider li img{ 
border:none;
}	
	
#prevBtn {
    border: medium none;
    display: block;
    float: left;
    height: 101px;
    left: -95px;
    position: relative;
    top: -155px;
    width: 60px;
}

#nextBtn {
    display: block;
    float: right;
    height: 101px;
    position: relative;
    right: -95px;
    top: -155px;
    width: 60px;
}
	
													
#prevBtn a, #nextBtn a {
    background: url("http://ifeanyioluoha.com/wp-content/uploads/2011/11/left.png") no-repeat scroll 0 0 transparent;
    color: transparent;
    display: block;
    height: 100px;
    width: 87px;
}
#nextBtn a{ 
	background:url(http://ifeanyioluoha.com/wp-content/uploads/2011/11/right.png) no-repeat 0 0;	
	}	

	/****Slide Show with Arrows End****/                        
                        

                        
                          <script type="text/javascript">
$(document).ready(function(){	
	$("#slider").easySlider({
		auto: true,
		vertical: false, 
		continuous: true 
	});
});
</script>