CSS Slider – Pure CSS Slider, no js

CSS Slider is a pure CSS only slider, without any using javascript. It is created by Damian Drygiel(he’s got a real awesome site, do check it out!).

Preview

Browser Support

  • Chrome (tested only on 30)
  • Firefox (tested only on 24)
  • IE
    • 9 No transitions
    • 10+ Works perfect
  • Opera (tested only on 12)

Usage

Add the following line in the head of the document:

<link rel="stylesheet" href="/path/to/csslider.css?x92026" />

Now add the code below where you want to show the slider:

<div class="csslider">
    <input type="radio" name="slides" id="slides_1" checked />
    <input type="radio" name="slides" id="slides_2" />
    <input type="radio" name="slides" id="slides_3" />
    <input type="radio" name="slides" id="slides_4" />
    <input type="radio" name="slides" id="slides_N" />
    <ul>
        <li>Content of slide 1</li>
        <li>Content of slide 2</li>
        <li>Content of slide 3</li>
        <li>Content of slide 4</li>
        <li>Content of slide N</li>
    </ul>
    <div class="arrows">
        <label for="slides_1"></label>
        <label for="slides_2"></label>
        <label for="slides_3"></label>
        <label for="slides_4"></label>
        <label for="slides_N"></label>
        <label for="slides_1" class="goto-first"></label>
        <label for="slides_N" class="goto-last"></label>
    </div>
    <div class="navigation">
        <div>
            <label for="slides_1"></label>
            <label for="slides_2"></label>
            <label for="slides_3"></label>
            <label for="slides_4"></label>
            <label for="slides_N"></label>
        </div>
    </div>
</div>