Hey, I found a tutorial for an image slider and I'm trying to customize it so that the images are wrapped with <a> tags so they can be clicked on and go to another page. However, I changed the javascript code to find the children of the ul and included a so instead of the lines like this,

Code:
ul.style.width = parseInt(imageWidth * imageNumber) + 'px';
I included a beside the ul so now they look like this,

Code:
ul.a.style.width = parseInt(imageWidth * imageNumber) + 'px';
The slider worked fine before without the <a> tags wrapper around the <img> tags in the list items but when I added the <a> tags wrapper around, the slider images disappeared. When I added a to the js code beside the each ul the images appeared again but the slider doesn't scroll through the images when clicking on the arrows. I'm not very good with javascript so if someone can help me figure out where I'm going wrong I would really appreciate it!

Here is my code,

Styling,
Code:
<style type="text/css">
.container{
	width: auto;
	max-width: 1200px;
	min-width: 300px;
	height: 350px;
	background: #1b2227;	
}
.slider_wrapper{
	overflow: hidden;
	position: relative;
	height: 350px;
	top: auto;
}
img.opacity_img {
	opacity: 1;
	filter: Alpha(opacity=100);
}
img:hover.opacity_img {
	opacity: 0.7;
	filter: Alpha(opacity=70);
}
#image_slider{
	position: relative;
	height: auto;
	list-style: none;
	overflow: hidden;
	float: left;
	/*Chrom default padding for ul is 40px */
	padding:0px;
	margin:0px;
}
#image_slider li{
	position: relative;
	float: left;
}
.nvgt{
	position:absolute;
	top: 130px;
	height: 72px;
	width: 72px;
	opacity: 0.6;
}
.nvgt:hover{
	opacity: 0.9;
}
#prev{
	background: url(images_Folder/slideReelImgs/png/arrow_left.png) no-repeat center;
	left: 32px;
}
#next{
	background: url(images_Folder/slideReelImgs/png/arrow_right.png) no-repeat center;
	right: 32px;
}
</style>
JavaScript,
Code:
<script type="text/javascript">
//1. set ul width 
//2. image when click prev/next button
var ul;
var li_items;
var imageNumber;
var imageWidth;
var prev, next;
var currentPostion = 0;
var currentImage = 0;


function init(){
	ul = document.getElementById('image_slider');
	li_items = ul.a.children;
	imageNumber = li_items.length;
	imageWidth = li_items[0].children[0].clientWidth;
	ul.a.style.width = parseInt(imageWidth * imageNumber) + 'px';
	prev = document.getElementById("prev");
	next = document.getElementById("next");
	//.onclike = slide(-1) will be fired when onload;
	/*
	prev.onclick = function(){slide(-1);};
	next.onclick = function(){slide(1);};*/
	prev.onclick = function(){ onClickPrev();};
	next.onclick = function(){ onClickNext();};
}

function animate(opts){
	var start = new Date;
	var id = setInterval(function(){
		var timePassed = new Date - start;
		var progress = timePassed / opts.duration;
		if (progress > 1){
			progress = 1;
		}
		var delta = opts.delta(progress);
		opts.step(delta);
		if (progress == 1){
			clearInterval(id);
			opts.callback();
		}
	}, opts.delay || 17);
	//return id;
}

function slideTo(imageToGo){
	var direction;
	var numOfImageToGo = Math.abs(imageToGo - currentImage);
	// slide toward left

	direction = currentImage > imageToGo ? 1 : -1;
	currentPostion = -1 * currentImage * imageWidth;
	var opts = {
		duration:1000,
		delta:function(p){return p;},
		step:function(delta){
			ul.a.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + 'px';
		},
		callback:function(){currentImage = imageToGo;}	
	};
	animate(opts);
}

function onClickPrev(){
	if (currentImage == 0){
		slideTo(imageNumber - 1);
	} 		
	else{
		slideTo(currentImage - 1);
	}		
}

function onClickNext(){
	if (currentImage == imageNumber - 1){
		slideTo(0);
	}		
	else{
		slideTo(currentImage + 1);
	}		
}

window.onload = init;
</script>
HTML,
Code:
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="Image-Slider-LnR.js"></script>
		<link rel="stylesheet" type="text/css" href="Image-Slider-LnR.css">
	</head>

	<body>
		<div class="container">
			<div class="slider_wrapper">
				<ul id="image_slider">
					<li><a href="page1.php" target="_self"><img class="opacity_img" src="images_Folder/slideReelImgs/png/image1.png" width="300" height="350" border="0" alt="" /></a></li>
                    <li><a href="page2.php" target="_self"><img class="opacity_img" src="images_Folder/slideReelImgs/png/image2.png" width="300" height="350" border="0" alt="" /></a></li>
                    <li><a href="page3.php" target="_self"><img class="opacity_img" src="images_Folder/slideReelImgs/png/image3.png" width="300" height="350" border="0" alt="" /></a></li>
                    <li><a href="page4.php" target="_self"><img class="opacity_img" src="images_Folder/slideReelImgs/png/image4.png" width="300" height="350" border="0" alt="" /></a></li>
                    <li><a href="page5.php" target="_self"><img class="opacity_img" src="images_Folder/slideReelImgs/png/image5.png" width="300" height="350" border="0" alt="" /></a></li>
                    <li><a href="page6.php" target="_self"><img class="opacity_img" src="images_Folder/slideReelImgs/png/image6.png" width="300" height="350" border="0" alt="" /></a></li>
                    <li><a href="page7.php" target="_self"><img class="opacity_img" src="images_Folder/slideReelImgs/png/image7.png" width="300" height="350" border="0" alt="" /></a></li>
                    <li><a href="page8.php" target="_self"><img class="opacity_img" src="images_Folder/slideReelImgs/png/image8.png" width="300" height="350" border="0" alt="" /></a></li>
				</ul>					
				<span class="nvgt" id="prev"></span>
				<span class="nvgt" id="next"></span>
			</div>
		</div>
	</body>
The example image slider I used had one image that the slider would slide through at a time but I'm looking to make the slider contain smaller width images so roughly 4 show up in the slider window instead of just one. But I don't want to have a set number of images that show up in the slider at one time, just a continuous flow, for example the image slider with the arrows on the rogers.com website.

Thanks!