Skip Navigation Services Work Apps Blog Contact

YUI Slideshow Intermediate Usage

Using the Config Object

You can pass an object literal as the second argument to the Y.Slideshow() constructor, which will override any of the default configuration values. For example:

	var oSlideshow = new Y.Slideshow('slideshow01', {
		transIn: Y.Transitions.staticTL,
		transOut: Y.Transitions.swipeOutLTR,
		easingIn: Y.Easing.easeNone,
		easingOut: Y.Easing.backBoth,
		duration: 1.0,
		interval: 5000,
		nextButton: '#slideshow01'
	});

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

CavePlanetSunset

Default Configuration Values

Property Type Default Value Description
transIn YUI3 Anim() Config Object Y.Transitions.fadeIn Transition to use for incoming slide.
transOut YUI3 Anim() Config Object Y.Transitions.fadeOut Transition to use for outgoing slide.
easingIn Easing Function Y.Easing.easeOut Easing function to use for incoming slide.
easingOut Easing Function Y.Easing.easeOut Easing function to use for outgoing slide.
zIndex Object {
container: 1,
slides: 2,
nextSlide: 3,
currentSlide: 4
}		 Z-indexes applied to container and slides in various states.
interval Integer 4000 Time in milliseconds between each slide change.
duration Number 0.5 Time in seconds to complete each transition animation.
autoplay Boolean true If true, slideshow will play automatically.
stopOnUser Boolean true If true, autoplay will cease if user clicks on slideshow controls.
debug Boolean false If true, setTemout() is used for autoplay timer.
previousButton Selector String or Y.Node Instance false The node(s) to use as the previous button(s).
nextButton Selector String or Y.Node Instance false The node(s) to use as the next button(s).
playButton Selector String or Y.Node Instance false The node(s) to use as the play button(s).
pauseButton Selector String or Y.Node Instance false The node(s) to use as the pause button(s).

Y.Transitions

When you use YUI Slideshow, an object called Y.Transitions is made which is a collection of Y.Anim() configuration objects. These are titled based on the effect that they produce. The following table explains each of the built-in transitions:

Transition Description
Y.Transitions.none No animation.
Y.Transitions.staticTL No animation. Slide is placed at the top left of the container.
Y.Transitions.staticTR No animation. Slide is placed at the top right of the container.
Y.Transitions.staticBL No animation. Slide is placed at the bottom left of the container.
Y.Transitions.staticBR No animation. Slide is placed at the bottom right of the container.
Y.Transitions.fadeIn Slide fades from 0 to 100% opacity.
Y.Transitions.fadeOut Slide fades from 100 to 0% opacity.
Y.Transitions.swipeInLTR Slide swipes into container from left to right.
Y.Transitions.swipeOutLTR Slide swipes out of container from left to right.
Y.Transitions.swipeInRTL Slide swipes into container from right to left.
Y.Transitions.swipeOutRTL Slide swipes out of container from right to left.
Y.Transitions.swipeInTTB Slide swipes into container from top to bottom.
Y.Transitions.swipeOutTTB Slide swipes out of container from top to bottom.
Y.Transitions.swipeInBTT Slide swipes into container from bottom to top.
Y.Transitions.swipeOutBTT Slide swipes out of container from bottom to top.

Download
Demo
Basic Usage
Intermediate Usage
Advanced Usage