Table of Contents

CSS-Only Slideshow

OpenWeb Solutions, LLC

HTML Structure

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

Stylize document

To ensure the correct aspect ratio for the document, use the CSS padding trick:

  • body
    • margin: 1%;
    • width: 98%;
    • background: white;
    • border-radius: 2px;
    • overflow: hidden;
    • font-size: 3vw;
    • position: relative;
  • body:before
    • content: "";
    • display: block;
    • padding-top: 57%;

Stack the slides

Use CSS to stack the slide <DIV>s on top of each other within the #slideshow element.

  • #slideshow
    • position: absolute
    • top: 0
    • left: 0
    • right: 0
    • bottom: 0
    • overflow: auto
    • overflow-x: hidden
  • .slide
    • background: white
    • display: block
    • width: 100%
    • height: 100%
    • position: absolute
    • top: 0
    • left: 0
    • z-index: 0

CSS Selection Rules

The following CSS rules will (a) keep the title slide above the stack, and (b) push the selected slide to the very top.

  • .title
    • z-index: 1
  • .slide:target z- -index: 2

Bonus: Javascript for keyboard navigation

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!