in Web Development

Fully css carousel cross browser?

I was asked to see if I could develop a carousel using nothing other than CSS. Firstly it depends how you define a carousel if it’s infinite loops then I think this can’t really be achieved through CSS alone (I would be happy to be proved wrong though!) this carousel is going to be left to right only.

After doing a little research there are some experimental slideshow type examples out there using checkboxes which have an on/off state equating to our left and right actions. I figured I could use a radio group which again provides the states we need. and using :before and :after on the navigation thus keeping the whole carousel at the same level in the dom. After going off on a tangent in this direction and after cross browser testing it seems elements that don’t have content can’t have :before or :after which actually makes sense. All browsers except Chrome seem to adhere to this. Chrome is a bit naughty when it comes to development as in my view it is too lenient with the rules.

The next thing then that immediately comes to mind in order to achieve this is using the :focus on a link but how do you then select the carousel?

Well using the ~ + selectors to select the immediate siblings and as above using :before and :after on the navigation we can keep everything at the same level.

Then using some keyframe animation we can animate the carousel when the link becomes active.

This works in all current browsers except IE9, as of course IE9 does not support CSS animations, so it’s not truly rid of JS if that’s a requirement and I don’t see a CSS workaround for that other than having a blunt left/right animation.

The other aspect to this is mobile, here :focus does not have the same meaning on mobile and I had to use :hover again usually you would solve this kind of problem adding classes with JS as I only tested on Safari it may differ on other devices.

Have a look at the example carousel

Write a Comment