https://github.com/drygiel/csslider

Pure CSS slider
https://github.com/drygiel/csslider

Last synced: 19 days ago
JSON representation

Pure CSS slider

• Host: GitHub
• URL: https://github.com/drygiel/csslider
• Owner: drygiel
• Created: 2013-10-15T15:19:09.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2018-05-08T19:14:18.000Z (over 6 years ago)
• Last Synced: 2024-02-13T01:48:35.756Z (9 months ago)
• Language: CSS
• Homepage: http://codepen.io/drygiel/pen/rtpnE
• Size: 215 KB
• Stars: 232
• Watchers: 20
• Forks: 116
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-css-only - Csslider - Pure CSS slider. (Uncategorized / Uncategorized)

README

        
CSS Slider

==========

Pure CSS, simple slider.



    

        

    



## Examples

Here are some examples:

- [Dark](http://rawgithub.com/drygiel/csslider/master/examples/dark.html)

- [Bright](http://rawgithub.com/drygiel/csslider/master/examples/light.html)

- [Basic](http://rawgithub.com/drygiel/csslider/master/examples/basic.html)

- [Playground](http://codepen.io/drygiel/pen/rtpnE)

## 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:

	```html

	

	```            

- Put code into webpage:

	

	```html

	


	    

	    

	    

	    

	    

	    


	        
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](https://github.com/drygiel/csslider/blob/master/build/template.jade) template file [here](http://codepen.io/drygiel/pen/rtpnE)


## Global configuration

Default configuration can be set in [LESS](https://github.com/drygiel/csslider/blob/master/build/csslider.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

```css

#my-slider .arrows label {

   border-left-color: red;

   border-right-color: red;

}

```

- inside navigation border

```css

#my-slider.inside .navigation label {

    border: 1px solid red;

}

```