Need help with csslider?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

drygiel
220 Stars 110 Forks 29 Commits 7 Opened issues

Description

Pure CSS slider

Services available

!
?

Need anything else?

Contributors list

# 257,788
CSS
HTML
19 commits
# 487,813
eloquen...
Laravel
CSS
HTML
1 commit
# 91,864
JavaScr...
lightbo...
jQuery
HTML
1 commit
# 1,449
image-f...
assembl...
netfram...
residua...
1 commit

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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.