Pure CSS Slider – No JS. Because it is possible!

Yes, it is possible to have a Pure CSS Slide which actually looks amazing and works great. Although it was not tested in all the currently used browsers, it is a great start. Sometimes the normal JS sliders can be very heavy and you should know a bit of JS to be able to tweak the slider to the desired look and functionality. Pure CSS slider is a great one and it looks good. One of best things is that with some knowledge of CSS you are able to customise it, add animations etc.

Give it a try and you can always help the creator to make this CSS slider better – https://github.com/drygiel/csslider

pure-css-slider
DEMO DOWNLOAD

Installation

  • Include the CSS stylesheet at the end of <head> element:
    <link rel="stylesheet" href="/path/to/csslider.css" />
  • Put code into webpage:
    <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>

    Code you can generate from JADE template file here

Global configuration

Default configuration can be set in LESS file.

Local configuration

If you want to change configuration for specific element you must override default config. For instance if you have an element with id #my-slider and you want to change:

  • arrows color
    #my-slider .arrows label {
        border-left-color: red;
        border-right-color: red;
    }
  • inside navigation border
    #my-slider.inside .navigation label {
        border: 1px solid red;
    }

Examples

Here are some examples:

Supported browsers

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


You may also like...

5 Responses

  1. Artchibald says:

    Hi Can I set this slider to autoplay? Is it responsive? Thanks

  2. designifyme says:

    Artchibald  Please, have look at this example, done with JS or CSS3 Animations. Hope it helps. http://codepen.io/drygiel/pen/xjJsC
    Thanks for visiting:)

  3. Artchibald says:

    designifymeArtchibaldThank you but I am not using this slider type anymore, I am using a Flipbook one now instead, I am looking for some help with Autoplay on thisone too if you have some pointers… Thanks, Archie. http://forum.jquery.com/topic/wordpress-flipper-jquery-plugin-do-autoplay

  4. designifyme says:

    HI Archie.  I am afraid, I cannot be of much help here as I am not very good at jquery but you can ask the author himself if he can be able to help you or use this one:
    http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/  it has the autoplay function. 

    I tried the first demo from the download package and it works perfectly. 
    Good luck:)

  5. NeutrinoTeam says:

    Hi, Couldn’t find if licence allow commercial use… ?

Leave a Reply

Your email address will not be published. Required fields are marked *