Get a Free Quote Now!

Drop us a line to get a free and personalized quote today! Click here for more info. Search Click here to subscribe to the FreshCut RSS feed!

YUI Slideshow Advanced Usage

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

CavePlanetSunset

Download
Demo
Basic Usage
Intermediate Usage
Advanced Usage


Powered by WordPress