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.

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

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) });
		

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.

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});
		

Get it at github.