Skip Navigation Services Work Apps Blog Contact

YUI Slideshow: Intermediate Usage

Using Configuration Attributes

You can use configuration attributes to control the slideshow’s behavior:

	var slideshow = new Y.Slideshow({
		srcNode: '#someID'
		transition: Y.Slideshow.PRESETS.slideRight,
		duration: 1,
		interval: 3,
		nextButton: '#someID'
	});

Tip: Because the slideshow itself is being used as the “nextButton”, clicking the slideshow will advance to the next slide:

CavePlanetSunset

Basic Configuration Attributes

Property Type Default Value Description
transition Slide Transition Object Y.Slideshow.PRESETS.fade Transition to use for slide animations.
easing CSS3 Easing Function ease-out CSS3 easing function to use for slide transitions.
interval Number|Array 4 Time in seconds between each slide transition.
duration Number 0.5 Time in seconds of each transition animation.
autoplay Boolean true If true, slideshow will begin playing automatically.
previousButton Selector String or Node/NodeList null The node(s) to use as the previous button(s).
nextButton Selector String or Node/NodeList null The node(s) to use as the next button(s).
playButton Selector String or Node/NodeList null The node(s) to use as the play button(s).
pauseButton Selector String or Node/NodeList null The node(s) to use as the pause button(s).

For a full list of configuration attributes, view the API documentation for our Gallery modules.

Y.Transitions

When you use YUI Slideshow, an object called Y.Slideshow.PRESETS is made containing configuration instructions for the preset transitions. The following table explains each of the built-in transitions:

Transition Description
Y.Slideshow.PRESETS.fade Incoming slide fades in, outgoing slide fades out.
Y.Slideshow.PRESETS.slideUp Slides swipe from bottom to top.
Y.Slideshow.PRESETS.slideRight Slides swipe from left to right.
Y.Slideshow.PRESETS.slideDown Slides swipe from top to bottom.
Y.Slideshow.PRESETS.slideLeft Slides swipe from right to left.

Download
Demo
Basic Usage
Intermediate Usage
Advanced Usage