Skip Navigation Services Work Apps Blog Contact

YUI Slideshow (Version 1.0): Advanced Usage

You are viewing the guide for an outdated version of this module. For the latest version, see YUI Slideshow

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
			}
		}
	});

CavePlanetSunset

Download
Demo
Basic Usage
Intermediate Usage
Advanced Usage