Skip to content
Branch: master
Clone or download
Latest commit 1445e2e May 28, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Update csslider.less Dec 13, 2016
examples
.gitattributes Initial commit to add default .gitIgnore and .gitAttribute files. Oct 15, 2013
.gitignore
README.md
csslider.sln Fixed dots position & size Oct 15, 2013

README.md

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;
}
You can’t perform that action at this time.