Welcome to Slippy

Usage

• Navigation: [Left]/[Right] arrows to move, [Space] or [Double Click] to go to next slide
• Overview: [ESC]/[Del]/[Tab] to view, [Click] to pick one slide
• Jump: Press [0-9] keys followed by [Enter] to go straight to one slide

H1's are centered by default

Layouts

This slide uses the "alt" layout

It inherits the class "nofooter" of the layout, which allows you to style it differently, and it doesn't have the footer div that the default layout has for example

By default, all slides use the default layout if it's present

Layouts must have a <content></content> tag that will be replaced by each slide's content

<div class="slide" data-layout="alt">
    Foo
</div>

<div class="layout" data-name="default">
    <h1>Some title</h1>
    <content></content>
    <div class="footer">
        Footer content
    </div>
</div>

<div class="layout nofooter" data-name="alt">
    <content></content>
</div>
            

Syntax Highlighting

Code is just pre tags with class="brush: <language>"

The eval class combined with the js brush makes that Execute link appear on the right

// in eval'd block, slide is the current slide
$(slide).css('background', '#533');
// and node is the code block
$(node).css('opacity', '.1');
            

Nifty feature for JS devs doing presentations

Also if you use alert() in your code, it's piped into those nicer boxes

alert('test');
            

This is really great to provide interaction during a presentation

Syntax Highlighting

function foo($var) {
    // this is some php code as an example
    $foo = new Class("meh");
    $foo->bar();
}
            

Incremental Slides

Hit next

Every "next slide" action builds up the slide

element..

by..

element.

For every element that has the incremental class on the slide.

That's it for now, enjoy!