Example Slideshow

# Hello, interwebs explorer.

## How to use this thing

Press the right arrow, down arrow, or spacebar to advance; press the left arrow or up arrow to move backward.

You can also click the left and right arrows in the control bar at the top.

# Intraslide animation

## I'm calling these "actions"

You can hide/reveal content within the slides by giving something a class of "action". Actions are revealed in the order in which they occur in the HTML. Advancing to the next slide will first reveal actions on the page if they exist.

    <p class="action">This will be hidden when the slide loads</p>

- Bullet point
- Another bullet point
- Yet another bullet point
- You get the idea

# Custom events

## These may or may not be useful

When a new slide is loaded, a "newSlide" event is fired, containing the number of the slide.

There's also an event triggered when a new "action" is revealed. (Take look at your console.)

    //Example usage
    $('html').bind('newSlide', function(e,id) { console.log(id) });

# Building slides

## It's easy

Each slide goes within a `section` element, like this:

    <section>
        <hgroup>
            <h1>Your heading</h1>
            <h2>Your subheading</h2>
        </hgroup>
        <p>All your slide content...</p>
    </section>

You don't have to worry about numbering the slides. The script will count the number of `section` elements and give each one a numbered ID on page load.

# Other details

## Small stuff

The hash updates with each slide.

The slideshow itself has 3 dependencies: jQuery, htmlSlides.js, and a stylesheet.

The slide script has one option, the option to hide the menu bar at the top:

    sliderInit({hideMenu: true});

# That's all

Get it at github.

- Rob Flaherty / @ravelrumba / rob@ravelrumba.com