Fork me on GitHub

Slider.css

HTML presentation without javascript.

Why world needs another HTML presentation plugin?
I need a lightweight HTML slide.
CSS is powerful enough to make slides.
It's cool & fun!

Why slider.css?

  • No javascript.
  • Lightweight but powerful enough.

Feature

  • Forward / Backward
  • Transitions
  • Progressbar(Chrome #enable-experimental-web-platform-features)
  • Maximize / Minimize
  • Page number
  • Basic layout

How to start?

<link rel="stylesheet" href="http://nodejs.in/slider.css/slider.css" />
<div style="width: 640px;height: 400px;">
    <!-- Maximize  -->
    <input id="slider-max" type="checkbox" checked/>
    <article class="slider slider-indicator">
    <a id="slider-default"></a>
    <label for="slider-max" title="Maximize"></label>

    <section id="slider-1" default>
        <!-- layout -->
        <div>
            <h1>Slider.css</h1>
            <p>HTML presentation without javascript.</p>
        </div>
    </section>
    <div>
        <!-- triggers -->
        <a></a>
        <a href="#slider-2"></a>
        <!-- progressbar -->
        <span></span>
    </div>

    <!-- start page -->
    <div id="slider">
        <a href="#slider-default" class="slider-start">PLAY</a>
    </div>

    <!-- progressbar container -->
    <div class="slider-progress"></div>
    </article>
</div>

THE END