Blog (my web musings)

Fiddling some more with CSS transitions and the checkbox hack to emulate click events via CSS, I tried my hand at making a CSS-only content slider.

Initially I attempted to make it with checkboxes, but due to the behaviour of multiple checkboxes being checkable at the same time (which totally mungs up the idea for a slider where you only want one slide activated), I turned to radio buttons instead.

The key difference between radios and checkboxes is that only one radio can be "on" in a group at any one time - checkboxes allow for more than one to be checked simultaneously - so radios lend themselves better to a slider project; activate radio 1 and bring slide 1 in to view, activate radio 2 and bring slide 2 in to view... you get the idea.

So here is the Responsive CSS Any Content Slider. This example just has forward and back nav controls. Shrink your bowser window (or view it on an iPhone, etc) and see how the nav controls change position, and padding decreases, to make better use of space.

Demo

And here's an example with extra "pips" to jump to specific slides:

Demo

And just for kicks, a slider featuring images only:

Demo

Key Features

• Can contain anything - images, text, whatever!
• Cycles continuously - doesn't stop at the last slide
• Uses CSS3 transitions to animate the slide effect (no JavaScript)

Compatibility

Modern browsers. IE9 doesn't show the transition effects (although the slides still change), and IE7/8 gets a scrollbar *

* OK, so these checkbox / radio click event hacks don't work in IE8 and under, so in an effort to make this slider content accessible in at least IE7/8, I have introduced a scrollbar for that browser. No nav controls but a visitors can slide their way across the content (ho-hum - its not pretty, but it works).