CSScience - CSS3 Responsive Slider / Carousel Using Radio Buttons

Important: If you want to resize the window manually, leave at desktop resolution. Or you can just click an icon.

### Cloud Dragon

by Brendan Zabarauskas

### Mountain Fort

by Brendan Zabarauskas

### Mountain Outpost

by Brendan Zabarauskas

### Cliffs

by Brendan Zabarauskas

### Hill Fort

by Brendan Zabarauskas
Select catcher

# Responsive CSS3 Slider Without Javascript*

Created by Ian Hansson (@teapoted)

Art from Brendan Zabarauskas (@bjzaba_).
Icons from the iconSweets set.

## Browser Support:

Best In Test: Firefox (transition performance)
Full Support: Chrome, Firefox, Opera, Safari (latest versions of all browsers)
Partial Support: IE9 (Functional, but does not support transitions)

## *No JavaScript Functionality (1 compatability fix though)

iOS devices don't handle labels properly. That means if you click on a label, it should target the object that it is for=. I've added a javascript fix for that. I could probably replicate the whole thing using :target rather than :checked which would also mend the problem, but that would mean I could only have 1 special function per page. I'll look into that some other time.

You can view this page without the js iOS fix here.

## How Does It Work?

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.

    	#slide1:checked ~ #slides .inner { margin-left:0; }

    	#slide2:checked ~ #slides .inner { margin-left:-100%; }

    	#slide3:checked ~ #slides .inner { margin-left:-200%; }

    	#slide4:checked ~ #slides .inner { margin-left:-300%; }

    	#slide5:checked ~ #slides .inner { margin-left:-400%; }

That is all the essential CSS, the other gaff is just styling and animation.

Created by Ian Hansson (@teapoted), Feb 2012.