Welcome

Contents:

Slide Show Templates Using HTML5, CSS3 ‘n’ JavaScript

What’s S5? What’s S6?

Simple Standards-based Slide Show System (S5) is a classic public domain (free, open source) slide show package inspired by Opera Show and others that works in all modern browsers without any plugin required because it includes its own slide show machinery in JavaScript. More S5 Project Site »

S6 started as a rewrite of S5 using the jQuery JavaScript library - offering easier to understand and easier to extend code. Add plugins, effects and more. Contributions welcome!

S6 in Action - Sample Slide Shows Online

Try some slide show samples powered by S6:

Keyboard controls:

Action Key
Go to next slide Space Bar, Right Arrow Down Arrow, Page Down, Click Heading
Go to previous slide Left Arrow, Up Arrow, Page Up
Go to first slide Home
Go to last slide End
Toggle between slideshow and outline view (Ø) T
Show/hide slide controls (Ø « ») C, Move mouse to bottom right corner

Templates

Classic

<div class='slide cover'>
  <h1>Your Slide Title Here</h1>
  <ul>
    <li>Item One Here</li>
    <li>Item Two Here</li>
  </ul>
</div>

<div class='slide'>
  <h1>Steps Demos</h1>

  <!-- mark list with class step to mark all items at once -->
  <ul class='step'>
    <li>Item 1.1 Here</li>
    <li>Item 1.2 Here</li>
  </ul>

  <!-- or mark individual list items -->
  <ul>
    <li class='step'>Item 2.1 Here</li>
    <li class='step'>Item 2.2 Here</li>
  </ul>

  <!-- or mark paragraphs, div blocks or whatever -->
  <p class='step'>Another Step</p>
</div>

<div class='slide'>
  <h1>Another Slide Title Here</h1>
  <p>yada yada yada</p>
</div>

<!-- h1.fullscreen => uses only centered heading with no content/body -->
<div class='slide'>
  <h1 class='fullscreen'>Another Slide - Using Fullscreen Heading</h1>
</div>

Modern

<section class='slides'>
  <!-- Add your slides here. Delete or comment out the slides below. -->

  <article class='cover'>
    <h1>
      Title Goes Here Up  <br>
      To Two Lines
    </h1>
    <p>
      Carlos Ruby  <br>
      November 11, 2020
    </p>
  </article>
      
  <article>
    <h3>Simple slide with header and text</h3>
    <p>
      This is a slide with just text. This is a slide with just text.
      This is a slide with just text. This is a slide with just text.
    </p>
    <p>
      There is more text just underneath with a <code>code sample: 5px</code>.
    </p>
  </article>

  <article>
    <h3>Slide with bullet points that builds</h3>
    <ul class="build">
      <li>This is an example of a list</li>
      <li>The list items fade in</li>
      <li>Last one!</li>
    </ul>

    <div class="build">
      <p>Any element with child nodes can build.</p>
      <p>It doesn't have to be a list.</p>
    </div>
  </article>

  <article>
    <h3>Slide with an image</h3>
    <p>
      <img style='height: 500px' src='images/example-graph.png'>
    </p>
    <div class='source'>
      Source: Carlos Ruby
    </div>
  </article>

  <article class='fill'>
    <h3>Image filling the slide (with optional header)</h3>
    <p>
      <img src='images/example-cat.jpg'>
    </p>
    <div class='source white'>
      Source: Carlos Ruby
    </div>
  </article>
      
  <article class='nobackground'>
    <h3>A slide with an embed + title</h3>
        
    <iframe src='http://slideshow-s9.github.io'></iframe>
  </article>

  <article class='slide nobackground'>
    <iframe src='http://slideshow-s9.github.io'></iframe>
  </article>

  <article class='fill'>
    <h3>Full-slide embed with (optional) slide title on top</h3>
    <iframe src='http://slideshow-s9.github.io'></iframe>
  </article>

</section>

Bonus: What’s Slide Show (S9)? Slide Show Generator for S6

A Ruby gem that lets you create slide shows and author slides in plain text using a wiki-style markup language that’s easy-to-write and easy-to-read and ships “out-of-the-gem” with S6 templates built-in. More Slide Show (S9) Project Site »

About, License

The slide show (S6) scripts and templates are dedicated to the public domain. Use it as you please with no restrictions whatsoever.

Questions? Comments?

Questions? Comments? Send them along to the wwwmake forum/mailing list. Thanks!

Edit Me! This website is a public GitHub repo. Please help by forking the project and adding to it.