#css carousel

As you might have already seen, recently I had added a new section to this blog — Front-end lab (check the bottom black bar with the links) where I put some experiments I work on from time to time. The latest experiment in the lab is Pure CSS carousels. That experiment started as a series of the smaller ones like those described in another post. Now I would like to explain how those carousels work and how do you use them in your projects.

Why CSS carousels?

I like to experiment with CSS. But, of course, any experiment should have some more practical and applicable idea behind itself in order to be something more than just a waste of time. So, let me point ideas behind the pure CSS carousels:

Less code. Pure CSS carousels in comparison to well-established javascript solutions in vast majority of the cases means less code. And less code means much more clear code with easier maintainability and, in a larger scope, smaller web page size and faster page loading. 

Flexibility. With CSS you can tune your carousel and get the result almost instantly while finding the effect you want. On the other hand, javascript carousels are usually complete libraries with a fixed effect that either suites your needs or not. If a javascript library contains more effects it affects, sometimes dramatically, it's size. If you need different effect for different elements of your site, you need more than one javascript library to accomplish this.

In fairness, I realize that some things are not that easy to accomplish with CSS or the stylesheets might grow immensely. Some things are just impossible to do with CSS, but this is not a news, I assume. Among the things to keep in mind when working with CSS animations in general:

at the moment CSS animations don't cascade in the Cascading Style Sheets… If we discard the irony, in practice it means you can not override them once defined. Luckily, this is a known problem, is discussed and, hopefully, will be addressed by the browser vendors

while working on this experiment, I found out that Firefox doesn't recognize @-moz-keyframes when used within @media {} blocks. Why is this a problem? In the demo, I have carousels containing images (they can contain whatever you want by the way). If you are doing responsive design, you are, most probably, using flexible images that change width/height on different screen widths. If your animation is based on some pixel-based values that are relative to the height/width (check margins in the first two carousels — those based on images widths and heights), you want to update the keyframes for different screen widths. Aforementioned issue in Firefox makes it impossible.

Under the hood

The pure css carousels, as the name states, are done with CSS. Without Javascript. That implies use of CSS3 animations. The syntax of those is explained elsewhere, for example, in this article on CSS Tricks. Even though the specification is in Working Draft state as of today (February 15, 2012), some browser engines already do support the CSS3 animations. The issue with support is obvious — most of IE versions are overboard. Unfortunately, Opera, even though a really good browser, got into this category as well.

Opera

In case of Opera, things can be fixed for these particular carousels pretty easily — instead of CSS animations, you would use CSS3 transitions with some tweaks. I have tried this and it works. But there is a problem with CSS transitions — you can not make a CSS transition repeatable without Javascript. Since carousels in the experiment are repeatable, for Opera the situation could be fixed only half-way. And, we would still have IE out of the loop.

Internet Explorer and others

After making the experiment public, one of the first comments on twitter I have got were

Very nice indeed but as with so many cool things, it just doen't work in Internet Explorer (< version 10 at least)

and

is there a solution for the IE 7-8-9 ?

The purpose of the experiment was not to make things cross-browser, but do something fun for capable browsers. But in this particular case for the practical reasons, I have decided to make this a cross-browser solution. So in order to fill the gap between capable browsers and those that don't support CSS3 animations yet, I have wrote some simple jQuery plugins that mimic the same behavior as the pure CSS solution. You will find links for plugin for each particular carousel style under the carousel itself. The plugs are written so that they could be used on top of the pure css carousels. Means, ideally, you would need both — CSS and javascript. And the question is WHY?

One reason for this is that I don't want you to supply a plugin to a browser that can do things without any javascript. Another reason to let capable browsers animate the carousels with CSS is that, out of the box, animation made with CSS natively is smoother and looks nicer than the one from the jQuery plugin due to very limited set of native easing functions (2 only) in jQuery. I didn't bother including other easing functions, but you're free to do so on your spare time.

How does this work then?

If you will take a look at a plugin for any of the carousels, you will see that first of all, we detect whether browser can deal with CSS animations natively. As the comment there says, that code is just borrowed from Christian Heilmann's Detecting and generating CSS animations in JavaScript post. Further in the code we wrap a call to our plugin with the check of animation support. For example like this for dissolve carousel:

$(function () { if( animation === false ) { $('.dissolve img').dissolve({ … }); } });

So, in case browser supports CSS animations natively, it does so without jQuery plugin being fired up. In other case, we use this small javascript polyfill to cover the gap between the browsers' capabilities.

Tune the carousels

There are a couple of ways you can tune the code to match your needs. First of all, I have added the LESS snippets for every carousel. Each of those has parameters that you can change and the whole carousel will be adjusted for your needs.

Important! The only thing that is not automatically adjustable even in LESS (not sure how to put calculations for those, advises are very much appreciated) — keyframes of the animations. These are hardcoded with the idea of having only 4 items in the carousel. If you have more or less than 4, adjust the percentages in the keyframes. Calculations should be pretty straight-forward.

Another adjusting point — the parameters you pass to the jQuery plugin. Each of the jQuery plugins accepts a set of parameters that you change in order to match the animation you intend in your CSS/LESS.

So, check the demo once again, grab the code you need and enjoy. Feel free to poke my on twitter or Google+ if you have questions or any feedback. Enjoy!

UPDATE July 19, 2012

I have put the code for all 4 types of the carousels on CodePenIO http://codepen.io/mishunov. Feel free to fork them, play and tune for your needs.

P.S.