Skip Navigation Services Work Apps Blog Contact

YUI Slideshow: Advanced Usage

Creating Custom Transitions

You can create your own transitions as object literals containing “slideIn” and “slideOut” objects.

	var slideshow = new Y.Slideshow({

		srcNode: '#someID',

		transition: {

			slideIn: {
				before: {
					top: 0,
					left: '-cW',
					opacity: 0
				},
				transition: {
					left: 0,
					opacity: 1
				}
			},

			slideOut: {
				before: {
					top: 0,
					opacity: 1
				},
				transition: {
					top: 'cH',
					opacity: 0
				}
			}

		}

	});

	slideshow.render();

CavePlanetSunset

Download
Demo
Basic Usage
Intermediate Usage
Advanced Usage