Download and share

⇩ Download .zip file of 14 ko

Tested on : Firefox 8+, Internet Explorer 9+, Chrome 16+, Safari 5+, Opera 11+

Explanations

The idea

The idea comes from my two previous experiments : Webdesign and Slideshow full CSS3, and the Automatic Slideshow in CSS3, and the desire to merge the two techniques to create an automatic and manual slide show.
Some defects were effective, so it was an opportunity to correct them and to improve the technique.

Principle

I wanted to present you a method to create a slide show using only HTML5 and CSS3 technologies.
Today, the implementation of animations (keyframes) makes easy to play in loop numerous elements simultaneously. Of course, some browsers have yet to evolve in order to incorporate these animations, but it’s broadly on track!
This CSS3 demonstration uses these keyframes combined with the transition property.

Technical details

Technically, I just used some @keyframes animations with the same duration (here 32s, 8s per image). My purpose was to use as little markup as possible to do all the design.

The play, stop and other control buttons are operated by a diversion of the :target pseudo-class. Thanks to the Vincent’s article (french) the jump to the anchor is stopped. (it was not the case in my early works)

This slideshow only works for Firefox and Chrome (latest versions), but, as you can see, the click actions are working with an aditionnal element named div.c_slider which has all the images in CSS background. First, i tried with the same element and a variation of left value, but the click actions was not working because of a conflict between animation and transition property. In fact, specifically, I tried to change the same property of an element (here left property) and, even if I set an !important rule on a bigger CSS selector, the value given by animation is priority.
For Internet Explorer 9, the problem doesn’t arise : it can’t understand animation, so it applies :target and transition rules.

For more technical details, please visit the Creative Juiz blog (french) with the tag “slideshow (french)“. A future article coming (maybe during holidays 😉 ) in french.
You want to improve this code ? Download it, improve it, and send me your version here. Your name will be added to the contributors list (with your consent).

Author & Contributors

Author : Geoffrey Crofte
Contributors :