You are here: Home / Freebies For Websites

Responsive CSS3 Any Content Slider (with JavaScript auto-play, large touch-toggle and swipe support)

This slider has evolved from the CSS-only version, using a small amount of JavaScript to create an "auto-play" feature, with a large touch-toggle in the slides' centre for easier tap activation on touch-screen devices. Also for touch is swipe left and right gesture support. 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 - swipe left and right too if you're on a touch device - and click/tap inside the slides' active area 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, large touch-toggle and swipe support)

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

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

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 the opening #slider div now invokes a toggleSlider() function;

var toggleControl = document.getElementById('toggle');
function toggleSlider(){
    if(sliderOn){
        stopSlider();
        toggleControl.className = '';
        setTimeout(function(){toggleControl.className = 'pause zoom';}, 1);
        } else {
        startSlider();
        sliderOn = true;
        toggleControl.className = '';
        setTimeout(function(){toggleControl.className = 'play zoom';}, 1);
        setTimeout(function(){toggleControl.className = '';}, 3000); // remove icon for IE9
        }
    }
document.getElementById('slider').onclick = function(){toggleSlider();}

View the source of this web page to snag the scripts and notice the "className" references to 'pause zoom' and 'play zoom' in the toggleSlider() function - they work on the additional #toggle div (placed after the slides), which acts as the large touch-toggle area for easy tap activation. The 'pause zoom' and 'play zoom' class-switch activates the CSS3 play/pause zoom animations, providing a nice visual indicator to show the user that they've interacted with the slides.

The "auto-play" feature is provided courtesy of the JavaScript below, inside which resides a direction switch that will be used later by the swipe gesture function. 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, direction){
    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;
            if(direction == 'r'){ // right
                (i == 1) ? slides[slides.length - jump].checked = true : slides[i-1].checked = true;
                } else { // left
                (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.

The left and right swipe gesture functions makes use of a slightly modified version of this lightweight touch handler events script, which is also included in the page along with the code below;

function swipesliderLeft(){ // swipe left
    autoSlider('slider', 'l'); // pass 'l' (left) direction to autoSlider() function
    stopSlider();
    }
function swipesliderRight(){ // swipe right
    autoSlider('slider', 'r'); // pass 'r' (right) direction to autoSlider() function
    stopSlider();
    }
slider.addEventListener('l', swipesliderLeft, false); // swipe left
slider.addEventListener('r', swipesliderRight, false); // swipe right

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;

#toggle { display:none }
.js #toggle { display:block }
.js #slider { cursor:pointer }

Compatibility

* Conditional styles have been provided to replace the arrow controls with a horizontal scrollbar in IE8. In IE7, only the first slide is visible, so you can either fiddle the CSS to make content lay vertically, or, avoid putting anything critical in slide 2 and onwards.

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.