moo.rd - Examples - glider

Glider is a powerful Class which allows to create fully-customizable slideshows.
You can decide if enable captions, thumbnails, arrows, effects , auto-resize and auto-start. In this demo there is a cool Glider with arrows (either normal and limits), thumbnails and arrowsKeyboard enbled. (try to press the right and left keyboard arrows). auto-resize is disbaled.

docs reference js code

window.addEvent('domready', function() {
 
	var imgUrl = '/examples/1.3.1/glider_thumbs/images/';
 
	var glid = new Glider('imgs', {
		enable: {
			resizeHeight: false,
			thumbnails: true,
			arrows: true,
			arrowsLimits: true,
			arrowsKeyboard: true,
			autostart: false
		},
		steps: 3000,
		captions: ['The Far Sky', 'Sea Islands', 'Bell Tower', 'Sunny Laguna'],
		captionWrapper: 'captions',
		captionHeightEffect: false,
		scrollOptions: {
			duration: 1000	
		},
		morphOptions: {
			duration: 1000,
			transition: 'bounce:out'
		},
		thumbTexts: [
			'<img src="' + imgUrl + 'p1.jpg" alt="" />',
			'<img src="' + imgUrl + 'p2.jpg" alt="" />',
			'<img src="' + imgUrl + 'p3.jpg" alt="" />',
			'<img src="' + imgUrl + 'p4.jpg" alt="" />'
		]
	});
 
	if(Browser.Engine.trident) {
		$$('ul#imgs li').setStyle('margin-bottom', '-3px');	
	}
 
});