Sroo

Sroo makes simple slideshows with simplest markup possible. Browse here for a demo: http://brainshave.github.io/sroo.

Features:

Intuitive navigation using mouse and keyboard
Prospectus view when displaying on small devices and in portrait orientation
Provides anchors to all slides so you have a permament links to every slide and subslide
Auto scaling
Uses semantic tags instead of CSS classes
Doesn't impose any look on your presentation
Works on modern browsers (tested on IE9, Chrome 13, Firefox 5, Opera 11)

The Simple Markup

Each slide is a <section> inside <body>. Each section has a optional <h1> header and each other node inside slide becomes a subslide. In the outcome, subslides shares same header.

<body>
  <section>
    <h1>Slide No 1</h1>
    <p>Subslide No 1.1</p>
    <p>Subslide No 1.2</p>
  </section>
  <section>
    ...

Even Simpler Markup

Hooray for the lazy, because they are in favor. You don't have to write manually <section>'s. As long as each slide begins with <h1> or <hr /> (in case of slide without a title) you're done.

<body>
  <h1>Slide No1</h1>
  ...subslides...
  <hr />
  <p>This slide doesn't have a title</p>
  ...

Even Simpler Simpler Markdown

In case you are generating your content from Markdown, It's becomes even better:

# Slide No1

Some stuff

Other stuff

---

Some stuff on titleless slide
...

Installation

Download sroo.css and sroo-min.js, put them somewhere and then add the bolded parts to your html file:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Presentation</title>
    <link rel="stylesheet" type="text/css" href="sroo.css" />
  </head>
  <body>
    <section>
      <h1>Slide 1</h1>
      ...
    </section>
    ...
    <script src="sroo-min.js"></script>
  </body>
</html>

Jekyll

It's extra easy to use it with Jekyll: There's a layout ready for you in _layouts directory. This doesn't require any plugins.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{{ page.title }}</title>
    <link rel="stylesheet" type="text/css" href="sroo.css" />
  </head>
  <body>
    {{ content }}
    <script src="sroo-min.js"></script>
  </body>
</html>

Footer

Inspired heavily by http://contrastrebellion.com/.

Copywrong 2011 Szymon Witamborski

MIT License