{{description}}
First we need to construct the HTML for the slideshow.
This includes our slides, and controls, as well as a message that is displayed when the slideshow is paused.
If you do not want an automated slideshow, this can be left out.
``` {{>slideshow-html-markup}} ```Now let's jazz it up a bit with some CSS.
``` {{>slideshow-css-styles}} ```Now we need to create our YUI instance and tell it to load the modules.
``` {{>slideshow-js-startup}} ```There are only a few modules we need to require:
If you are not interested having an automated slideshow, you can leave out `event-hover` and `gallery-timer`.
We start our slide show by saving a reference to the slideshow container, `#spiffySlides`. Then we get a reference to all the slides and store them in a `Y.NodeList`. Our next variable, `controls`, stores a `Y.NodeList` of the control elements.
After that we store our string for selected slides and controls. This will make maintenence easier for us later on.
Next, we create a new `Y.Paginator` that will display only one item, or "slide", at a time. We use the `size()` method of our `slides` NodeList to get the total number of items in our paginator.
Now that we have our variables in place, we need to define what happens when the page number changes in the paginator.
``` {{>slideshow-js-pageChange}} ```Paginator's first page is always 1, and since a `NodeList`'s first element is at 0, we need to subtract 1 from the page to give us the proper index in the slides and controls list. (`index = page - 1;`)
After we get the proper index, we need to remove any evidence of a preceeding active slide then make the new slide and control active.
To define the controls click event, we can delegate on all anchor (``) elements within the `.controls` element.
``` {{>slideshow-js-click}} ```First we prevent the default behavior of the anchor element.
Then we check to see if it's active. If it is, we simply `return` out of the function to prevent any further action.
If it's not active, we need to get the page number to go to. To do that, we use the number from the element and send it to the paginator. Since `Paginator` only takes numbers, we need to parse the string before we set it.
At this point we are done with the slideshow funtionality.
The rest of this walk through will be covering making the slideshow automated.
Using `gallery-timer`, we will create a new `Timer` object.
``` {{>slideshow-js-timer}} ```We want the slides to advance every 2.5 seconds, so we set the length to 2500. We make it run continuously by setting repeatCount to zero.
The timer fires a `'timer'` event on every loop. We listen for this event to proceed to the next slide. If there isn't a next slide, we simply go back to the first one.
We probably do not want to have the slideshow run while we are trying to interact with the controls, so let's make it pause when we mouse over the whole thing.
``` {{>slideshow-js-pause}} ```Using the `event-hover` module, we can define the mouse over and mouse out behavior at one time. When we mouse over the slideshow, we pause the timer. When we mouse out of the slideshow, we resume the timer.
That's it! Now let's put it all together.
``` {{>slideshow-full}} ```