If you follow me on Twitter you’ll know I’ve been pretty enthused about this fluid CSS carousel of mine. There are two aspects to it; the fluidity and the CSS functionality.
Demo
The demo features photos of me, taken on various mountains by Suze. Cheers to her for the content.
The fluidity
Making a carousel fluid is actually ridiculously simple. Let us assume you have five panels. Remember that number!
A carousel is made up of three basic components:
- A viewport
- A wrapper for the panes
- A pane
Thus, our markup is:
<div class=carousel>
<ul class=panes>
<li>
<h2>Pane 01 title</h2>
<img src=pane-01.jpg alt="">
</li>
<li>
<h2>Pane 02 title</h2>
<img src=pane-02.jpg alt="">
</li>
<li>
<h2>Pane 03 title</h2>
<img src=pane-03.jpg alt="">
</li>
<li>
<h2>Pane 04 title</h2>
<img src=pane-04.jpg alt="">
</li>
<li>
<h2>Pane 05 title</h2>
<img src=pane-05.jpg alt="">
</li>
</ul>
</div>Now, the viewport defines what we see, we slide our panes behind it and they poke through, like this:
The red denotes the viewport (and incidentally a single pane), the blue denotes the whole five panes behind the viewport.
We just slide these behind the viewport to show a certain amount at a time, et voilà; carousel. But, you all know how carousels work, right…?
To make this fluid is so simple. The viewport needs to fill its container, so this gets width:100%;. Easy.
One pane needs to fit nicely in the viewport, so this needs to occupy 100% of the viewport. With this in mind…
We have five panes, remember, so the ul needs a width of 500%. Five panes that are each the same width as the viewport gives us a width of 500%.
Now we know:
.carousel{
width:100%;
}
.panes{
width:500%;
}So if .panes holds five panes, each pane should be 20% its width. This is where it might get a little confusing…
The viewport is 100% width, the wrapper is five times as big as that and each pane is one fifth the width of the wrapper.
Our code is left at:
/*------------------------------------*\
$CAROUSEL
\*------------------------------------*/
.carousel{
overflow:hidden;
width:100%;
}
.panes{
list-style:none;
position:relative;
width:500%; /* Number of panes * 100% */
overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
-moz-animation:carousel 30s infinite;
-webkit-animation:carousel 30s infinite;
animation:carousel 30s infinite;
}
.panes > li{
position:relative;
float:left;
width:20%; /* 100 / number of panes */
}
.carousel img{
display:block;
width:100%;
max-width:100%;
}
.carousel h2{
font-size:1em;
padding:0.5em;
position:absolute;
right:10px;
bottom:10px;
left:10px;
text-align:right;
color:#fff;
background-color:rgba(0,0,0,0.75);
}The basic equation for making a carousel with any number of panes is:
.carousel{
width:100%;
}
.panes{
width:100 * number of panes%;
}
.panes > li{
width:100 / number of panes%;
}So, a four-pane carousel would be:
.carousel{
width:100%;
}
.panes{
width:400%;
}
.panes > li{
width:25%;
}It really is that simple. That’s all there is to making a fluid carousel.
CSS powered
Okay, in this carousel I decided I was going to power it with CSS. This is super unorthodox so if you’re yelling WTF
at your screen please read on!
It was going to be (and actually is) used on my good friend Sam Penrose’s new design portfolio, so knowing we had free reign and a little chance to experiment I decided to opt for a pure CSS solution.
This is simple in theory but the maths gets so tricky.
All we do is animate .panels from right to left then back again. We animate for a bit, we pause, we animate again, pause again and so on until it’s done. Then we loop it infinitely.
The CSS is:
@keyframes carousel{
0% { left:0; }
11% { left:0; }
12.5% { left:-100%; }
23.5% { left:-100%; }
25% { left:-200%; }
36% { left:-200%; }
37.5% { left:-300%; }
48.5% { left:-300%; }
50% { left:-400%; }
61% { left:-400%; }
62.5% { left:-300%; }
73.5% { left:-300%; }
75% { left:-200%; }
86% { left:-200%; }
87.5% { left:-100%; }
98.5% { left:-100%; }
100% { left:0; }
}The numbers are so tricky to work with and if anyone can come up with a decent equation to describe it I would be so happy. I’ve got Nick on the job, but I’ve not worked it out yet; I can’t quite grasp the relation between five panes and the numbers above in a way that I could do some quick maths to work out the animations for a four-pane carousel.
The problem is that you have to know how many full moves and pauses are needed for a full iteration of the carousel (before it starts on its infinite loop), and then how to evenly space these numbers between 0 and 100%. My animations last for 1.5% and pause for 11%, these numbers are perfect for adding up to 100%.
Update
Massive thanks to Clay who’s worked out that the number of steps is 4n-3 and that the total time between start of one animation and the next is 100 / 2(n-1) (where n is the number of panes). See his full comment.
But, the code above will sort you out a perfect animation for a five panes so feel free to nab it! I’ll update if and when I crack some maths!
Wait, CSS?!
Using CSS for this is really, really unorthodox so comes with some massive caveats.
Do not use CSS to animate this carousel if:
- You require the contents of every pane to be visually accessible to the user.
- You require full browser support.
- You do not require interactions (like stopping the animation or clicking between panes).
If you are going to use this CSS-only method then ensure that:
- The user can still use the site fully without the contents of the panes.
- You are okay with older browsers not animating and just displaying the first pane.
- You do not want or require users to be able to interact with the carousel.
If you can’t use CSS then combine the fluidity above with plain ol’ trusty JS.
I will happily say that the fluidity is the most important, useful and impressive thing about this technique. Until I, or anyone, can get you a decent equation to substitute your numbers into, the CSS animations are too cumbersome and restrictive to be of large-scale use to most people.
By Harry Roberts on Monday, October 31st, 2011 in Web Development. Tags: Animation, CSS, CSS3, HTML, Progressive Enhancement, Responsive web design | 17 Comments »
+
clay said on 1 November, 2011 at 3:46 am
Briefly, it looks like the total number of steps for the animation is 4n-3, and the total time between start of one animation and the next is 100 / 2(n-1).
Example: 3 panes would be
79 steps at 25% for the total segment (let’s call it 22 stop 3 move to match your above ratio 11 : 1.5)0: {left: 0;}
22: {left: 0;}
25: {left: -100%;}
47: {left: -100%;}
50: {left: -200%;}
72: {left: -200%;}
75: {left: -100%;}
97: {left: -100%;}
100: {left: 0;}
Example: 6 panes would be 21 steps at 10% for the total segment ( 9:1 for simplicity? )
0: {left: 0;}
9: {left: 0;}
10: {left: -100%;}
19: {left: -100%;}
20: {left: -200%;}
29: {left: -200%;}
30: {left: -300%;}
39: {left: -300%;}
40: {left: -400%;}
49: {left: -400%;}
50: {left: -500%;}
59: {left: -500%;}
60: {left: -400%;}
69: {left: -400%;}
70: {left: -300%;}
79: {left: -300%;}
80: {left: -200%;}
89: {left: -200%;}
90: {left: -100%;}
99: {left: -100%;}
100: {left: 0;}
solved for 10 as well, and though the decimal places get long and gnarly, it seems to hold.
-c
Harry Roberts said on 1 November, 2011 at 9:26 am
Wow, Clay, thanks so much!
Dan Eden said on 1 November, 2011 at 11:22 am
Great job, Harry. I think we’re getting to the stage where we can consider CSS animation more seriously in our projects. Taking this slider as an example, you could very easily use Modernizr to detect support for CSS animations and provide a JS fallback where needed.
The adoption rate for support has recently picked up, with IE10 and Opera 12 promising future support. The benefit of CSS animations over Javascript or jQuery is obvious – hardware accelerated *visual* effects which stay in the CSS, letting Javascript get on with the logical stuff it does best.
Clay said on 1 November, 2011 at 12:15 pm
Happy to help. A tiny correction to my comment above – the equations are correct, but I claim that the 3 pane example would have 7 steps when it clearly has 9. Whoops!
PM5544 said on 1 November, 2011 at 12:52 pm
very cool!
You might want to add -webkit-transform: translateZ( 0 ); to force hardware acceleration for webkit, makes all the difference in rendering speed in situations where it is needed, like laptops and mobile devices.
Ian Oliver said on 1 November, 2011 at 3:13 pm
Great work Harry. Simple and beautiful.
I still haven’t got my head right around it, but I’m wondering if CSS animation steps might help with working out the ‘equidistant timing’. More info at http://leaverou.me/2011/09/pure-css3-typing-animation-with-steps/ and http://hacks.mozilla.org/2011/09/taking-steps-with-css-animations/
On the other hand, it looks like steps can’t be animated between, so this may not help one bit. On yet another hand, this Smashing Mag article briefly shows steps being put on individual frames, so that could mix things up: http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/
Luke Connolly said on 1 November, 2011 at 4:10 pm
Keep pushing it, Harry. This is awesome, next-level s#@$ right here.
Jonathan Silvester said on 1 November, 2011 at 11:08 pm
Love how fast it loads, wish I could use it but IE & Opera won’t play so it stays on the login screen and /test.html for now, until I learn JavaScript, awesome CSS wizardry once again.
Oskari said on 2 November, 2011 at 6:08 am
This is cool as hell :) Got to try this out
Schriebmann said on 2 November, 2011 at 7:32 am
Great work. Check this (source) with :target
http://www.designmadeingermany.de/slideshow/
Josh Vogt said on 2 November, 2011 at 3:59 pm
Great demo. It’s never fun trying to figure out the keyframes but you nailed it.
If you want the animation to stop you can add .panes:hover{animation-play-state:paused;} or add tabindex=”-1″ to the ul element and add .panes:focues{animation-play-state:paused;} to stop the animation when the user clicks on the carousel.
I can’t think of a way to manually flip between panes without screwing up the animation or having the animation start again from some random point.
Cory said on 2 November, 2011 at 7:36 pm
Excellent post.
Was looking for a responsive carousel recently.
Rory said on 3 November, 2011 at 12:31 pm
Insteresting article and very impressive way of building a carousel.
But let’s face it, progressive enhancements are one thing, but if an image carousel is a main feature of your home page, you need it working cross-browser really, so personally i’d deem this unusable. Unless of course, you don’t care about 53% of the web. http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0&qpcustomd=0
Harry Roberts said on 3 November, 2011 at 12:40 pm
@Rory: I make a very clear point about whether or not this is suitable to use in the article.
Jeff Sebring said on 6 November, 2011 at 3:30 am
Good work Harry.
Whether this is ready for prime time today or not, we can all learn and be inspired by the ways you are using css here.
Mike said on 31 January, 2012 at 3:56 pm
Finally think I’m getting to grips with this!
Question: How would you somehow seamlessly cycle back to position 1, rather than reverse direction?
Mike said on 31 January, 2012 at 5:00 pm
Just realised I should have qualified that question. I’ve managed to get it to scroll backwards quickly from position n to 1. But what I’m wondering… is there a way to make it appear that position 1 repositions to position 6, etc… so that it’s an infinite single direction caraousel?