Get new jQuery plugins just once a week

×

CSScience

September 10, 2012

CSScience | Responsive css3 slider without javascript

CSScience is a responsive CSS3 slider without any javascript.There is an iOS fix though.
Working :-
The actual slider is much like any JavaScript slider. It floats all of the content areas (articles) next to each other. And then hides the overflow. We then animate the margin of the inner div, so if we have 5 articles, moving the left-margin -100% would give us the second article.

To save our input we are using radio buttons. As mentioned above you could also use :target and anchor links, but it doesn’t mimic Javascript in the same way as you would only be able to handle one action at a time, you would end up with a bunch of items in your history (clicking back would turn the slider back one), and it’s been done before.
We put the radio buttons at the top so when they are :checked we can use a general sibling selectors (~) to change our slider.

Created by Ian Hansson

Home
Example

csscience responsive css3 slider

cssscience is a responsive css3 slider

CSScience

Related posts:

Prefix-free
Skitter
bigpicture.js
cssience-responsive-slider

http://jquer.in/wp-content/uploads/2012/09/cssience-responsive-slider.png

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever
Couple Gift Ideas