Juizy slideshow Full CSS3/HTML5 slideshow
Download and share
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.
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.
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
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
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
- Vincent De Oliveira : blocked the jump to the anchor ;