Skip Navigation Services Work Apps Blog Contact

YUI Slideshow Version 1.0

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

YUI Slideshow is a YUI3 module that allows you to easily turn any HTML element’s children into a customizable, animated slideshow.

Download
Demo
Basic Usage
Intermediate Usage
Advanced Usage

Download

YUI Slideshow is now hosted on the Yahoo! CDN as part of the YUI Gallery, so there is no need to download the script. If you’d like, you can grab the source and fork the project at GitHub.

Demo:

Each example is just a DIV element containing 3 IMG elements. The DIVs’ width and height are set, with the overflow property set to hidden.


All settings default.

CavePlanetSunset

transIn: Y.Transitions.staticTL
transOut: Y.Transitions.swipeOutLTR
easingIn: Y.Easing.easeNone
easingOut: Y.Easing.backBoth
duration: 1.0
interval: 5000

CavePlanetSunset

transIn: Y.Transitions.swipeInTTB
transOut: Y.Transitions.swipeOutTTB
easingIn: Y.Easing.backBoth
easingOut: Y.Easing.backBoth
duration: 1.0

CavePlanetSunset

Any element with an ID or a Y.Node instance can be turned into a next, previous, play, or pause button:

CavePlanetSunset

This is a link with the id “nextButton”.
This is a link with the id “prevButton”.
This is a link with the id “playButton”.
This is a link with the id “pauseButton”.


Download
Demo
Basic Usage
Intermediate Usage
Advanced Usage