< >

### "Spread of cards" responsive carousel layout 2.1

There is a bug with multiple "+" CSS selectors in Mac/iOS Safari 8.0 - it's fixed in nightly 10600.1.25.1, r175941, so the next version of iOS8.1 can't come fast enough!

UPDATE 12/12/14: still not fixed in OSX Safari8.0.2 or iOS8.1.2, and still fixed in the webkit nightly. Come on Apple...

UPDATE 19/1/15: nope - still no shipping fix for Safari. But... here's a variation that DOES work around the Safari bug - even if it's built just slightly different.

Fork of the spread of cards layout , removing the calc() measurements in transitions to fix the animation in IE10+ (IE doesn't like mixing calc and transition).

It's removed the gutters around the cards, but if you're not afraid of nesting more mark-up, that's easily solved with an element inslide the <LI>s.

Now with CSS transform goodness to keep the animations smooth.

From original codepen:

If you really need a carousel, you need a responsive one.

This demo is just an early test of a different sort of carousel layout. Generally you need javascript to be in control of the not only the events, but monitoring for viewport size changes, setting the size of the carousel and the position of the cards on and off canvas.

The tricky bit is that the CSS - not the JS - is controlling the media queries and the basic layout. So why fight it with JS resize events and setting explicitly defined sizes? In this demo, JS only changes one thing in the DOM when you click left or right - it selects the next card that is the first visible one.

Everything else is taken care of in CSS.

1. It's not just one long (mostly off-canvas) strip, which still uses up compositing memory, even if it's not painted to the viewable screen. Instead, it uses a stack off cards left and right. Hopefully that means using less memory (depending on your browser).

2. As a byproduct of the stacks offscreen, you get a neat animation.

3. Because there are no floats or absolute positioning, the height of the overall carousel is controlled only by the content, containers don't need a complimentary fixed height to maintain shape.

4. Design decisions like the width of the carousel, the cards and how many cards (across all screen sizes) are much easier to deal with in the stuff that defines them - the CSS. Not to mention the reduction in JS events fired by window resizing - and the jank that causes.

5. This was originally built to work with an angular.js website (not like the jQ version here) and it suits that pattern as each card can have a ng-class directive and the controller just changes a value in the scope to activate the first card you want shown.