CSS Slider

Pure CSS, simple slider.

Examples

Here are some examples:

• Dark
• Bright
• Basic
• Playground

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

  element:

• Put code into webpage:

  
      
      
      
      
      
      
  
          
  Content of slide 1
          
  Content of slide 2
          
  Content of slide 3
          
  Content of slide 4
          
  Content of slide N
      
      
  
          
          
          
          
          
          
          
      
      
  
          
  
              
              
              
              
              
          
      
  
  

  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

#my-slider .arrows label {
   border-left-color: red;
   border-right-color: red;
}

• inside navigation border

#my-slider.inside .navigation label {
    border: 1px solid red;
}