hacks@philingrey.com

14Jul/112

My very own infinite carousel (aka – “picture-spinny-thing”)

After a conversation with a friend, I set about making a non-flash carousel because, you know, I'm cool and that..... Then after making it I needed to store it somewhere, so here it is! All-told about 2 hours work, with pictures stolen from my church's website, mainly because the graphics team there are simply amazing.

You might ask why not use flash, after all I'm not against flash. But in this case there are two main reasons why you might try a non-flash solution:
- So it can work on the iPhone/iPad
- Because screen readers (for the partially sighted/blind) can't read flash sections of a webpage but, conversely, any html present can clue the reader into what's going on semantically within a page.

Click the picture below to get to the demo:

Geek notes: the glow effect is CSS3 box-shadow (learn more here), IE6-8 support is added with CSS3Pie

Everyone loves social media!
    • Steve

      Cool, it even worked on my phone. (Well mostly. It didn’t seem to be able to tell when it lost focus, and so never went back to auto-scrolling.)

      • http://philingrey.com Phil Ingrey

        That’s just how mobiles use the hover state, if you click on the background away from the carousel then the browser sends the unhover signal and the timer resets. Not the most intuitive system, but it works!