With the constant move to replace Flash for simple use cases many websites are using HTML + CSS content sliders or carousels to show information. Many of these are quite complex and rely on animations created in javascript, the only way until CSS transitions were introduced into Webkit browsers (Safari, Chrome etc.) in 2008. By the end of 2010 transitions will be implemented in the stable build of all browsers apart from Internet Explorer – with features still being added to the IE9 previews we may even see them supported in IE9.Instead of always catering for the lowest common denominator, we can easily write code that uses different methods depending on the browser that the user is browsing with with the help of libraries such as Modernizr. Alternatively, if you don’t fancy using Modernizr, you can always strip out the functionality you need – it’s well written and is easy to pull apart.
Libraries needed for this example
- jQuery – for the selector engine and the animation – other JS libraries that include animation will work just as well.
- Modernizr – for feature detection, as mentioned above you could alternatively write your own detection or pull Modernizr apart.
HTML structure
To make the slider work we are going to have a box with overflow set to hidden with a very long stripe inside with each slide contained in it. To slide the slider we are going to move the long stripe from left to right.
<div id="FS_slider"><div id="FS_holder"><section id="content1"><h1>Slide 1</h1></section><section id="content2"><h1>Slide 2</h1></section><section id="content3"><h1>Slide 3</h1></section><section id="content4"><h1>Slide 4</h1></section></div></div><div id="FS_controls"><div id="FS_buttons"><a class="active" href="#content1"></a><a href="#content2"></a><a href="#content3"></a><a href="#content4"></a></div></div>
I’ve used the prefix FS_ for each id and class simply so the demo works without any clash with the existing slider on this site. This hopefully makes it clearer for people to see what’s going on in the demo.
The controls div is outside the slider div to ensure it stays on top for users without javascript.
Interesting bits of CSS
Check the source of the demo for the whole lot, this are just the important bits. To keep this simple, I’m only showing the standard form for any vendor prefixed CSS3 – check the source of the demo for the real deal. Also, if you aren’t using something like SASS to abstract away these issues when writing, then you should be!
#FS_slider {overflow: hidden;width: 940px;height: 460px;position:relative;}
As promised, we have a box where anything outside it is hidden. To ensure it hasLayout in IE we add give it a relative position. If we don’t then in IE6 and 7 the overflow:hidden declaration is ignored.
#FS_holder {transition: all 0.5s ease-in-out;width: 10000px; //Javascript calculates what this should beheight: 460px;}#FS_holder section {float: left;width: 920px;height: 460px;padding:10px;}
So, our holder div is the very wide bit with our slides inside. It’s the bit that moves, so it has a transition set on it. Inside that holder, each section is floated left and has the right size to fit in nicely.
Javascript
I’ve used jQuery here, but use the library of your choice. As long as it supports animation then it will be fine. As with the CSS, this is only the useful bits. The Modernizr library defines some booleans for various features, if the browsers supports css transforms then Modernizr.csstransforms is true, otherwise it’s false. This comes in handy here, as you’ll see.
var pixels,vP,slide = 1,slider_width = $("#FS_slider").width(),num_slides = $("#FS_slider section").length;/* You don't *need* to do this, but it makes the code below more concise. */if ($.browser.webkit) {vP = "-webkit-";} else if ($.browser.msie) {vP = "-ms-";} else if ($.browser.mozilla) {vP = "-moz-";} else if ($.browser.opera) {vP = "-o-";}$(document).ready(function() {$("#FS_slider #FS_holder").width(slider_width * num_slides);$("#FS_controls a").click(function(){slide = parseInt($(this).attr("href").replace("#content", ""));slideTo(slide,slider_width);return false;});});
In this stripped down version we have a few things happening. Firstly, we define some variables, secondly, we work out what vendor prefix to use in the CSS. We don’t have to, but it keeps our slideTo function simpler in a minute. Then, once the document is ready, we set our holder to be wide enough to hold our slides, and we bind an event to our controls.
This event grabs the slide number from the href attribute, then slides to that slide. The meat of the code is the slideTo function, given below:
function slideTo(slide, width) {pixels = width * (slide - 1);$("#FS_controls a").removeClass("active");$("#FS_controls a[href=#content"+slide+"]").addClass("active");if (Modernizr.csstransforms3d && Modernizr.csstransforms && Modernizr.csstransitions) {$("#FS_holder").css(vP+"transform","translate3d(-"+pixels+"px, 0px, 0px)"); $("#FS_holder").css("transform","translate3d(-"+pixels+"px, 0px, 0px)");} else if (Modernizr.csstransforms && Modernizr.csstransitions) {$("#FS_holder").css(vP+"transform","translate(-"+pixels+"px, 0px)"); $("#FS_holder").css("transform","translate(-"+pixels+"px, 0px)");} else if (Modernizr.csstransitions) {$("#FS_holder").css("margin-left","-"+pixels+"px");} else {$("#FS_holder").animate({"margin-left":"-"+pixels+"px"},600); //If you animate left, IE breaks.}}
This defines four different ways of sliding, 3dtransforms, 2dtransforms, just transitions and a jQuery animation. We use 3D transforms first, as they are hardware accelerated on iOS devices – in testing it was clear that this was needed for this to look smooth on the iPhone and iPad. After that we go for the usual 2D transforms, again much smoother than javascript animations where they are supported. The plain transition won’t be used in many browsers, most implement transitions and transforms, but we may as well add it, and then the usual jQuery fallback. As you can see, to animate using transitions, we just change the property, because we already specified a transition in the CSS, the animation automatically happens.
And that’s it! With the help of Modernizr this becomes a simple bit of code and ensures that we get the best out of the browser the user is using.
Feel free to add comments/suggestions below!
]]>
