Css3 Content Slider with Pagination

Css3 Content Slider with Pagination

By Leo Gerber

Css3 is a big step forward for people building the web. Still many developers think that css3 is just about adding some nice borders and shadows to your elements on a site. Others might think, oh yeah cool they have animations, but honestly who cares?

But did you know that those animations could replace your javascript code for content sliders? Did you know that css3 animations are running smoother than javascript and even smoother as butter? Hell Yes!

css3 content slider playing

css3 content slider playing

To build a content slider in css we have to use some tricks and one has to say that the css code is pretty long compared to the code needed for the one or other content slider written in javascript. Browser coverage is also a big concern. The content slider we are going to build, will only run in Firefox and Chrome. The Internet Explorer 9 and Opera in it’s latest version(11.62) are not supported, allthough at least the pagination works in both. Opera introduces keyframe animation in version 12, which means the slider should run in later versions of Opera too.

The css of the content slider is based on two ideas. The first idea is from smashingmagazine.com and comes from an article by Alessio Atzeni. He has build a content slider, which is already having all the nice animation stuff we would like to have. But there is one thing missing: controls!

This will lead to the second idea on which the content slider is based on: creativejuiz.fr (the site is in english) . This content slider made by Geoffrey Crofte has navigation in it, although it is not really behaving the way we would like to have it. When clicking on the play pause buttons after choosing a page the autoplay animation starts on a different sheet. That could be quite confusing for a user. But the technique used for the slider – which is explained here – enables the possibility to us, to react on the behavior of the user.

Css3 Content Slider Paused

Css3 Content Slider Paused

Combining the two techniques, we get a content slider which has the followering features:

  • play
  • pause
  • go to _nth sheet
  • nice smooth animation
  • no javascript

If you read the articles linked above and check the code for the content slider, you will pretty fast understand the way it works. That’s the reason why I am not going to make a tutorial out of this article. Anyway if you guys really need/want a tutorial, leave a comment below. I’ ll try to write one.

Go to the Preview

Download the Content Slider