Pure CSS slider

  • By Damian Drygiel
  • Last update: Dec 28, 2022
  • Comments: 5

CSS Slider

Pure CSS, simple slider.

ight design

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)

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;
}

Github

https://github.com/drygiel/csslider

Comments(5)

  • 1

    Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

  • 2

    Small slideshow edit

    Hi !

    I tried to adapt the slideshow for small screens.

    I am a beginner on GitHub so do not hesitate to tell me if some things are not good or other! :)

  • 3

    Incorrect .css file

    First three bytes of https://github.com/drygiel/csslider/blob/master/examples/themes/csslider.light.css are unprintable symbols. It's hard to notice because browser ignores it, look at hex editor. I did not check another .css files.

  • 4

    Issue with more of 10 slides.

    I tried using this script for more of 10 slides, but when I click on the right arrow at the 10th slide the slideshow return to the slide 1. How can I make it work until the last slide?

    I attach the code I used. slider.txt

  • 5

    CSS3 Animations!

    Hello!

    Would you please mind adding some documentation on how to get the CSS animations to auto-play/integrate them into the slides???

    That would be great, as I am currently somewhat confused.

Popular Tag

Related