This slider is the next step on from the CSS-only version, using a very small amount of JavaScript to create an "auto-play" feature. Please read the Notes section for details about JavaScript enhancement.

Click on the circular ◄ and ► arrow controls to stop auto-play and manually move between slides, and use the play/pause toggle to start/stop auto-play...

►►►►►►►

12345

|| ||►

Fast Edit v1 - Content Management System(1/5)
Get a free and easy CMS to edit your website! Includes file manager and page manager with a one-click interface to easily arrange the menu.

This is to stop the slider once the user interacts with it, which is just good manners because it would be bad for UX to have it wandering off, doing it's own thing, in the middle of a conversation... You know what I mean.

And extra play/pause control toggle markup that invokes the same stopSlider() function, and a startSlider() function;

View the source of this web page for those JS functions. The fun stuff - the "auto-play" feature - is provided courtesy of the JavaScript below. I've also included an extra line that adds a class of "js" to the <html> element when JavaScript is enabled which, when coupled with the appropriate CSS, makes the slider degrade back to the CSS-only version when JavaScript is turned off;

This leaves us with a few tweaks to make sure things look good when JavaScript is disabled. We'll call on good ol' mister CSS for that - this will hide the play/pause control toggle. Note the ".js" selector that only applies when JavaScript is enabled;