CSS3-only slider

Unexpected benefit of CSS development

CSS3 made it possible to incorporate almost impossible features of webdesign in your markup. Now it seems like it can replace javascript. Well, of course I am just joking, but still there is a lot of functionalities that you can introduce just by the use of styles.

I personally never thought that it would be possible to code a working slider with navigation only with css. But now I start to realise that we can utilise keyframes to do just anything you can imagine. Only, you need to think of the right approach.

The following two examples show how to code a slider by the use of keyframes and animations. I really like the way that CSS3 and now (the probable soon advent of) CSS4 are developing. Acquaint yourself with the code that stands behind it – very interesting.

LINK TO AN EXAMPLE DEMO ON CODEPEN
http://codepen.io/AMKohn/pen/EKJHf