jQuery Slider

The HTML:
 
<div id="slider_box">
  <div id="slider_container">
    <div id="slider">
 
      slider content...
 
    </div>
  </div>
</div>
 
<a onclick="if ( jQuery('#slider').position().left <= -800 ) { jQuery('#slider').animate({left: "+=800px"}, {easing: 'swing', duration: 1000}); } return false;">Previous</a>
<a onclick="if ( jQuery('#slider').position().left > -7200 ) { jQuery('#slider').animate({left: "-=800px"}, {easing: 'swing', duration: 1000}); } return false;">Next</a>
 
The CSS:
 
#slider_box {
	position: relative;
	width: 800px;
	height: 200px;
}
 
#slider_container {
	position: relative;
	width: 800px; // the viewport width
	height: 200px;
	overflow: hidden;
	display: inline;
}
 
#slider {
	position: relative;
	width: 8000px; // the actual width of the entire banner, 10 elements
	height: 200px;
	overflow: hidden;
}