Slidr

Very simple and light-weight jQuery plugin to create HTML Presentations!

Swipe left or use arrow key -> to go to next slide

Features

How to Navigate

How to Use

Step 1: Include Slidr CSS file in <head> tag:

<link href="slidr/slidr.css" rel="stylesheet" />

Step 2: Include jQuery and Slidr JavaScript file just before <body/> tag and call it:

<script src="slidr/third_party/jquery.js"></script>
<script src="slidr/slidr.js"></script>
<script>
  // "background" option sets presentation background color
  // "fontsize" option sets general slides font size
  $('.slide').slidr({"background" : "#eee", "fontsize" : "1.1em"});
</script>

Step 3: Create HTML markup for slides with container class being slidr_container like: 

<div class="slidr_container">
  <section class="slide start">
    <h1 class="big">My Awesome Presentation</h1>
    <p>This is going to be fun!</p>
  </section>
  
  <section class="slide">
    <h2>My Awesome Presentation</h2>
  
    <ul>
      <li>Topic One</li>
      <li>Topic Two</li>
      <li>Topic Three</li>
    </ul>
  </section>
  
  <section class="slide">
    <h2>The End!</h2>
    <p>Big Thanks!</p>
  </section>  
</div>

Here we have given a class name of slide to each slide but you can also use some other name.

That's it ;-)

Code Support

First include hightlight.js file just before <body/> tag and call it:

<script src="slidr/third_party/highlight/highlight.pack.js"></script>
<script>
  // enable syntax highlighting
  hljs.initHighlightingOnLoad();
</script>

Now simply wrap your code snippets in between:

<pre><code class="LANG-NAME">...</code></pre>

PHP Code Snippet Example

<pre><code class="php">
class HelloWorld
{
    public static function sayHello() {
        echo "Hello World!";
    }
}

echo HelloWorld::sayHello();
</code></pre>

It will output like:

class HelloWorld
{
    public static function sayHello() {
        echo "Hello World!";
    }
}

echo HelloWorld::sayHello();

Code Support - Alternative Way

If you are using Markdown (See Next Slide) and as you probably already know, you can also add code snippets by indenting them with 8 spaces or 2 tabs:

        class HelloWorld
        {
            public static function sayHello() {
               echo "Hello World!";
            }
        }
		
        echo HelloWorld::sayHello();

Will output as (with language auto-detected):

class HelloWorld
{
  public static function sayHello() {
    echo "Hello World!";
  }
}

echo HelloWorld::sayHello();

Markdown Support

First include markdown-js file just before <body/> tag and call it:

<script src="slidr/third_party/markdown/markdown.js"></script>
<script>
  $('.markdown').each(function(){
     var html = markdown.toHTML($(this).html());		
     $(this).html(html);
  });
</script>

Now simply apply the class markdown to any element and write Markdown within it:

Below markup:

<p class="markdown">
  # Some Heading
  ---
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  - List Item One
  - List Item Two
  - List Item Three
<p/>

Generates following HTML output:

# Some Heading --- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. - List Item One - List Item Two - List Item Three


Note: Do not indent Markdown code or else it will be treated as Code snippet unless you want it!

Fragments Support

To use fragments, simply apply the class slide_fragment to an element:

<ul>
  <li class="slide_fragment">I am first fragment</li>
  <li class="slide_fragment">I am second fragment</li>
  <li class="slide_fragment">I am third fragment</li>
</ul>

Thank You

If you like it, please spread the word ;-)


Developed by Sarfraz Ahmed

You can also find me on Twitter as @sarfraznawaz


Thanks To:



Download on Github