View RSS Feed

Beverleyh

Responsive CSS3 Any Content Slider (no JavaScript)

Rate this Entry
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

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).

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).

Submit "Responsive CSS3 Any Content Slider (no JavaScript)" to del.icio.us Submit "Responsive CSS3 Any Content Slider (no JavaScript)" to StumbleUpon Submit "Responsive CSS3 Any Content Slider (no JavaScript)" to Google Submit "Responsive CSS3 Any Content Slider (no JavaScript)" to Digg

Updated 11-27-2014 at 01:27 PM by Beverleyh (basic support added for IE7)

Tags: None Add / Edit Tags
Categories
CSS related

Comments

  1. Beverleyh's Avatar
    Basic support has now been added for IE7. Content is accessible via a scrollbar, like it is in IE8.