You are here: Home / Freebies For Websites

Responsive CSS3 Any Content Slider (with JavaScript auto-play, simple controls and nav pips)

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

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

[ demo | download ]

Fast Feed v1 - RSS News Feed Manager (2/5)
Get a nifty news manager to edit and update an RSS v2.0 xml file. Supports multiple users and includes optional image upload and one-click archiving.

[ demo | download ]

Fast Edit BE (Snippet Manager) (3/5)
Get a no-fuss website snippet editor. Easy setup, runs in the back-end, and supports multiple snippets of editable content on any number of web pages.

[ demo | download ]

Responsive CSS3 Multi-Level Menu (4/5)
A responsive, CSS-only, multi-level menu that uses CSS3 transitions. With drop-down, horizontal desktop view and sliding, off-canvas mobile view.

[ demo | download ]

Fast Warn v1 - Alert Message Manager (5/5)
Get a hassle-free message manager to display an alert box or critical warning to vistors. Use the RSS file to feed alerts to social media websites.

[ demo | download ]


Features

A CSS3, responsive content slider that;

Please view the source of this web page to grab the JS, CSS and HTML markup.

Notes (JavaScript auto-play and simple controls)

The first difference to the CSS-only version of the slider is that arrow labels invoke the stopSlider() function;

var arrow = document.getElementById('slider-outer').getElementsByTagName('label');
for(var i = 0; i < arrow.length; i++){
    arrow[i].onclick = function(){
        stopSlider();
        stopSliderCtrl.style.display = 'none';
        startSliderCtrl.style.display = 'block';
        }
    }

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;

var stopSliderCtrl = document.getElementById('stop-slider');
var startSliderCtrl = document.getElementById('start-slider');
stopSliderCtrl.onclick = function(){
    stopSlider();
    stopSliderCtrl.style.display = 'none';
    startSliderCtrl.style.display = 'block';
    }
startSliderCtrl.onclick = function(){
    startSlider();
    stopSliderCtrl.style.display = 'block';
    startSliderCtrl.style.display = 'none';
    }

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;

document.documentElement.className = 'js'; // adds class="js" to <html> element
function autoSlider(slider){
    var slides = document.getElementsByName(slider);
    for(var i = 1; i < slides.length; ++i){
        if(slides[i].checked == true){
            (navigator.appVersion.indexOf("MSIE 9") == -1) ? jump = 2 : jump = 3;
            (i == slides.length - jump) ? slides[1].checked = true : slides[i+1].checked = true;
            break;
            }
        }
    } 
...

This JSFiddle demonstrates the gist of what the JavaScript is doing to "auto-play" the slides - you can't see the radios activate in sequence in the demo above because they're hidden with CSS! And here's the demo with visible radios and slides.

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;

#slider-outer .ctrl { display:none }
.js #slider-outer .ctrl { display:inline }

Compatibility

* Conditional styles have been provided to replace the arrow controls with a horizontal scrollbar in IE7/8.

I haven't been able to test in other browsers/devices but feedback is always welcome. Contact me if you spot anything hinky.

Related

Freebies

Looking for more freebies for your website? Grab a bunch of free PHP, CSS and JavaScript goodies, from flat file CMS' to RSS managers to responsive CSS menus, galleries and sliders.