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>
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) });
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 small stylesheet.
The slide script has one option, the option to hide the toolbar at the top:
htmlSlides.init({ toolbar: true });
Get it at github.
- Rob Flaherty / @robflaherty / rob@ravelrumba.com