Mootools Carousel est un plugin Mootools vous permettant de présenter de manière efficace et design des images pour vos applications web.

Comment ça marche ?

Le système est assez simple. Dans un premier temps, vous créez une liste HTML avec les images à faire défiler:

<div id="wrap">

	<ul id="carousel">
		<li><img src="/billet/add/id/image1.jpg" alt="Image 1" /></li>
		<li><img src="/billet/add/id/image2.jpg" alt="Image 2" /></li>

		<li><img src="/billet/add/id/image3.jpg" alt="Image 3" /></li>
		<li><img src="/billet/add/id/image4.jpg" alt="Image 4" /></li>

	</ul>
</div>

Ensuite, avec un peu de CSS, on transforme la liste pour n'afficher qu'une seule image:

#wrap {
	height:250px;
	width:450px;
	display:block;
	overflow:hidden;
	position:relative;
}
#carousel {
	width:10000px;
	margin:0;
	padding:0;
}
#carousel li {
	height:250px;
	width:450px;
	margin:0;
	padding:0;
	float:left;
	display:inline;
}

Et enfin, le coeur du système, on anime le tout avec du Javascript utilisant la librairie mootools:

window.addEvent('domready', function() { 

	// Let's define some variables first
	var wrapper = $('wrap'); // The outer wrapper
	var carousel = $('carousel'); // The inner wrapper
	var items = $$('#carousel li'); // The different elements, this is an array
	var item_width = 450; // The full width of a single item (incl. borders, padding, etc ... if there is any)
	var max_margin = items.length * item_width - item_width;
	
	// Set up the animation
	var animation = new Fx.Tween(carousel, {duration: 500});
	
	// The function to browse forward
	function next_item(pos){
		if(pos == -max_margin){
			animation.start('left', 0);
		} else { 
			var newposition = pos - item_width;
			animation.start('left', newposition);
		}
	}
	
	// The function to browse backward
	function previous_item(pos){
		if(pos == 0){
			animation.start('left', -max_margin);
		} else { 
			var newposition = pos + item_width;
			animation.start('left', newposition);
		}
	}
	
	// Set up the 'next' and 'previous' buttons
	$('next').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('left'));
		next_item(position);
	});
	
	$('previous').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('left'));
		previous_item(position);
	});
	
}); 

Pour mieux comprendre le système, allez donc faire un tour sur le site officiel et la démo du carousel Mootools.