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?
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.
Combining the two techniques, we get a content slider which has the followering features:
- go to _nth sheet
- nice smooth animation
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.