by, 04-14-2014 at 11:09 AM (22082 Views)
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.
And here's an example with extra "pips" to jump to specific slides: http://fofwebdesign.co.uk/template/_...r-rwd-pips.htm
Any just for kicks, a slider featuring images only: http://fofwebdesign.co.uk/template/_...er-rwd-img.htm
- Can contain anything - images, text, whatever!
- Cycles continuously - doesn't stop at the last slide
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).
IE7 users only get the first slide (no scrollbar, no controls) so you could live with this, or edit the CSS within a conditional stylesheet to make the slides lie vertically and permanently visible (maybe).