How to make a slideshow using Mootools

Hey all, so by popular demand and me just tired of repeating myself, i'm going to write a slider tutorial for you guys to use within your own websites.

1. First create a page where your slideshow will appear

Now within the head section of your document put a reference to the mootools javascript library. I like to use google to load this library for caching purposes. 

<head>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js"></script>
	
</head>

2. Create a html structure to hold all of your slideshow elements

3. Now time to style your slideshow

	.container{
		position:relative;
		width:500px;
		height:139px;
		overflow:hidden
	}
	#parent_element{
		width:3000px;
		margin:0;
		padding:0;
		list-style-type: none;
		position: absolute;
		top:0;
		left:0;
	}
	.child_item{
		float:left;
		width:500px;
	}

4. Create controls

 Next 
 Prev

4. Create the javascript function to handle the transition

var count = 0;
var width = 500;
var numofelements = $('parent_element').getChildren('li').length - 1;

function slide_to(index)
{
	if(index == 'next')
	{
		if(count < numofelements)
			count = count + 1;
	}
	else if(index == 'prev')
	{
		if(count > 0)
			count = count - 1;
	}
	else
	{
		count = parseInt(index);
	}
	slide(count);
}
function slide(index)
{
	var lft = index * width;
	$('parent_element').tween('left','-'+lft+'px');
}

5. need it in jQuery?

make sure you change the library link to reference jquery instead of mootools and then just change

var numofelements = $('parent_element').getChildren('li').length - 1;
to
var numofelements = $('#parent_element > li').length - 1;

and
$('parent_element').tween('left','-'+lft+'px');
to
$('parent_element').animate({left:'-'+lft+'px'});


Download the entire .html document here