Start with a blank HTML document and add a <DIV> with ID #slideshow. The entire document will be dedicated to the slideshow. To embed the slideshow into other documents, use the <OBJECT> tag.
Each slide is a <DIV> with the classname "slide". The title slide has the additional class "title". Fill each slide with the content that should be on that slide.
Finally, add a navigation element (such as <P>) to the #slideshow element, and fix it to always appear at the bottom of the screen.
Next step: basic document styling
To ensure the correct aspect ratio for the document, use the CSS padding trick:
|
|
Use CSS to stack the slide <DIV>s on top of each other within the #slideshow element.
|
|
The following CSS rules will (a) keep the title slide above the stack, and (b) push the selected slide to the very top.
|
In order to allow for keyboard use to navigate the slideshow, add a Javascript listener to the window's keyup (and possibly click) events.
To advance to the next slide, set the window.location.hash to the ID of the desired slide.
Check the source of this document for a hands-on demo!