Improved Content Slider in Mootools

application.css

  /***  SLIDER   ***/
#worksamples {
	width:960px;
	height:180px;
}
#workimgs{
	width:900px;
	overflow:auto;
	overflow:hidden;
	height:200px;
	margin:0 auto;
}
#slider-list{
	width:20000px;
	margin:0;
	padding:0;
	left:400px;
}
#slider-list li{
	list-style:none;
	margin:0;
	margin-right:5px;
	padding:2px;
	float:left;
	width:292px;
	height:200px;
}
.slider-arrows {
	display:block;
	width:18px;
	height:42px;
	text-indent:-9999px;
	overflow:hidden;
	margin-top:74px;
	cursor:pointer;
}
#slide-left {
	float:left;
	background:url(../img/left-arrow.png) no-repeat !important;
	background:url(../img/left-arrow.gif) no-repeat;
}
#slide-right {
	float:right;
	background:url(../img/right-arrow.png) no-repeat !important;
	background:url(../img/right-arrow.gif) no-repeat;
 
}

contentslider.js

/**
 * Content Slider - A Useable Horizontal Scroller
 *
 *  Requires a parent element with hidden overflow and child elements floated inside the parent.
 *  Take any two elements as previous and next buttons and scolls the child elements through the parent element
 *
 * Dependencies: MooTools 1.2 (and probably 1.1.x but not tested)
 *
 * adapted from Antonio Lupetti's original blog post at
 *    http://woork.blogspot.com/2009/01/elegant-animated-weekly-timeline-for.html
 *
 * @version		0.9
 *
 * @license		MIT-style license
 * @author		Bryce McDonnell bryce {at} bridgetownint {dot} com   www.brycemcdonnell.com
 * @copyright	Bryce McDonnell
 */
var ContentSlider = new Class({
    config: {
		totIncrement: 0,
		increment: 0,
		maxRightIncrement: 0,
		container: $empty,
		slidingEl: "",
		slideAtATime: 1,
		previous_btn: $empty,
		next_btn: $empty,
		duration: 1000,
		transition: Fx.Transitions.Back.easeInOut
	},
 
	initialize: function(config) {
 
		this.config = $merge(this.config, config);
 
		this.config.maxRightIncrement = this.config.increment * -( ( $$(this.config.slidingEl).length / this.config.slideAtATime) - 1 );
		if (this.config.previous_btn && this.config.next_btn) {
			this.activateMoveBtns();
		};
 
		return this.config
	},
 
	move: function() {
		this.config.fx = new Fx.Tween(this.config.container, {
		property: 'margin-left',
		duration: this.config.duration,
		transition: this.config.transition,
 
		onStart: function() {
			this.config.previous_btn.removeEvents('click');
			this.config.next_btn.removeEvents('click');
		}.bind(this),
 
		onComplete: function() {
			this.activateMoveBtns();
		}.bind(this)
 
		});
	},
 
	activateMoveBtns: function() {
		//Next Button
		this.config.next_btn.addEvents({
			'click' : function(event){
				this.config.totIncrement = (this.config.totIncrement>this.config.maxRightIncrement) ? this.config.totIncrement - this.config.increment : 0;
				event.stop();
				this.move();
				this.config.fx.start(this.config.totIncrement);
	 		}.bind(this)
 
		 });
 
		//Previous Button
		this.config.previous_btn.addEvents({
			'click' : function(event){
				this.move();
				event.stop();
				this.config.totIncrement = (this.config.totIncrement < 0) ? this.config.totIncrement + this.config.increment : this.config.maxRightIncrement;
				this.config.fx.start(this.config.totIncrement);
			}.bind(this)
 
		});
	}
});
ContentSlider.extend(new Fx.Tween);

index.html

<script src="/lib/js/contentslider.js" type="text/javascript"><!--mce:0--></script>
<div id="worksamples" class="slide-box">
	<a id="slide-left" class="slider-arrows"> previous </a>
	<a id="slide-right" class="slider-arrows">next</a>
<div id="workimgs">
<ul id="slider-list">
	<li><img class="aligncenter size-full wp-image-168" title="BME logo small" src="http://blog.thedevranch.net/wp-content/uploads/2009/05/BME-logo-small.jpg" alt="BME logo small" width="300" height="405" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="meth" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="nuskin" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="choice" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="meth" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="nuskin" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="choice" width="292" height="184" /></li>
</ul>
</div>
</div>

invocation.js

//this goes just above the </body> tag in a onpageload function

new ContentSlider({
		increment: 904,
		container: $("slider-list"),
		slidingEl: "#slider-list li",
		slideAtATime: 3,
		next_btn: $("slide-right"),
		previous_btn: $("slide-left")
	});