YUI Slideshow Advanced Usage

Creating Custom Transitions

You can pass in a Y.Anim() configuration object literal to the Y.Slideshow() constructor to create your own transitions. If this object has the ‘duration’ or ‘easing’ properties defined, the slideshow’s default easing and duration will be ignored.

	var oSlideshow01 = new Y.Slideshow('slideshow01', {
		transIn: {
			from: {
				left: function(node){
					return parseInt(-(node.get('parentNode').get('offsetWidth')));
				},
				opacity: 0
			},
			to: {
				left: 0,
				opacity: 1
			}
		},
		transOut: {
			from: {
				top: 0,
				opacity: 1
			},
			to: {
				top: function(node){
					return parseInt(node.get('parentNode').get('offsetHeight'));
				},
				opacity: 0
			}
		}
	});

Download
Demo
Basic Usage
Intermediate Usage
Advanced Usage