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:
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. |