Fork me on GitHub


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.


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

How to start?

<link rel="stylesheet" href="" />
<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 -->
            <p>HTML presentation without javascript.</p>
        <!-- triggers -->
        <a href="#slider-2"></a>
        <!-- progressbar -->

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

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