Blog (my web musings)

Search Blog

RWD CSS3 Any Content Slider (JS auto-play)

Details

Published: 11th Oct 14

Today I revisit the Responsive CSS3 Any Content Slider, enhancing it with auto-play and start / stop controls (and later, a large touch-toggle with swish "zoom" animation), thanks to a sprinkle of JavaScript.

But first, a recap on the CSS-only version that was covered in an earlier blog post, mainly just as a reminder about usage of the checkbox hack to emulate click events via CSS - that's what gives it functionality without JavaScript, but, I was contacted and asked to make it play slides automatically, so rather than get tied up in longwinded CSS3 animations with complicated timing delays, I turned to JavaScript to do the job.

Foreword

Demos are fully functional in modern browsers and IE10+, with 95% functionality in IE9 and basic fallback for content accessibility in IE7/8 (no frills there folks, just basic bread-and-water-type sustenance).

Adding JavaScript

Looking at the CSS-only version, I could see that the easiest way to auto-play the slides would be with a snippet of JavaScript to activate the radios in sequence. Google came up trumps on a convenient function for that - see this JS Fiddle for a reduced case example.

Now, I have extra radios in my slider - one at the start and one at the end which act as extra control arrows necessary for continuous cycling - so I adapted the function to account for that, plus I added a bit of a workaround to accommodate IE9's differing array length. Here's the outcome (speedy 1 second intervals for comfortable viewing)...

This was just the first stage. The lack of controls were obviously a problem, so next I wrote 2 simple JS functions to stop and start the slider again, with the initialisation placed inside startSlider(), and that called onload;

You can see in the demo above that I added a simple style switch to the JS, that hides and shows the play and pause control buttons as needed. but I wasn't particularly happy with the turn-out - the style.display additions to the JS, coupled with the extra markup for the controls, left me feeling a little bit... meh. Plus, when I handed the demo to my sister on iPhone, she said that she thought the controls looked cluttered in such a small space - even with her delicate lady-fingers, I could see that usability might be a problem. So, I took this feedback and observation away with me, and thought about how I could improve things.

So I turned to something that I know many web users are already familiar with - YouTube - and thought about how I could use that behaviour in my slider. Good thinking, Batman - I would make the whole of the active area clickable, and turn that into the stop/start toggle! :)

I wanted to take the opportunity to reduce the markup (and drop the hacky " || &nbsp; || " pause button) and so looked to use only ONE element as my control toggle. Now, some pretty groovy CSS3 icons have emerged on the web recently, so I hopped over to One Div to see if they had anything there I could use. They did - a neat play and pause icon about 8/9 lines down. So, I snaffled those and popped them in to my next slider test as #toggle div. The new JS toggle function (invoked on the #slider div) switches #toggle div's classes during play and pause states, bringing the appropriate icon in to view at the appropriate time;

No animations in IE9 so there's a bit of CSS in the stylesheet that just keeps the icon opacity really low in that browser, and there's a 3 second timeout in the JavaScript that removes the icons when the slides start playing again.

I'm pleased with how it turned out and am happy that the slider falls back to the CSS-only version when JavaScript is disabled. Please feel free to grab the JS, CSS and HTML from the demos above to customise for your own projects.

Update

If you want to remove the 300ms delay on touch devices, try the SwiftClick script that can be found on this page: