Example Slide Show

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>

Custom events

These may or may not be useful for you

When a new slide is loaded, a "newSlide" event is fired. (Take a look at your console.)

There's also an event triggered when a new "action" is revealed.

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

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

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.

Plays well with images

The Best Dinosaur

Other details

Small stuff

The hash updates with each slide.

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

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

htmlSlides.init({ toolbar: true });

That's all

Get it at github.

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