► ๖ۣۜLINH ๖ۣۜOLIVER ◄

CSS slider – without JS – code 3 – with auto fade next: http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/

First, let’s take a quick look at the markup (abbreviated for brevity):

<div class="css-slideshow"> 
  <figure> 
    <img src="class-header-css3.jpg" width="495" height="370" /> 
     <figcaption><strong>CSS3:</strong> CSS3 delivers a...</figcaption> 
  </figure> 
  <figure> 
    <img src="class-header-semantics.jpg" width="495" height="370" /> 
    <figcaption><strong>Semantics:</strong> Giving meaning to...</figcaption> 
  </figure> 
  ...more figures... 
</div>

Pretty basic stuff, just a div to contain the whole thing, then each image+caption set is contained in a figure. Now for the basic styling:

The key thing about the above CSS is that all the figures are stacked up one atop another. This is accomplished by positioning the container div relative then positioning the figuresabsolute.

Staggering the animation start

Now here’s the crux of this slideshow cycling technique. All of the figures use the same animation, but with staggered start times. Here’s a simple example, with only four images and no cross-transition between them.

The first image (represented by red above) is visible from 1-25, the second image (green) is visible from 26-50, the third image (blue) is visible from 51-75, and the fourth (orange) is visible from 76-100, then the whole cycle starts over again with the first image. So even though all four images have the same animation, which runs the same length of time for each image, because the start times are staggered only one image is visible at a time.

In the case of our slideshow, there are 8 images total, and we’ll display them each for 6 seconds, so the animation runs for a total of 48 seconds, and we’ll stagger the start times by 6 seconds. The animation for the first image starts at 0 seconds, the next one starts at 6 seconds, the next one after that starts at 12 seconds, then 18, then 24, and so on.

Timing the animation

Just one piece left, the animation itself, which runs for 48 seconds. When the animation begins at 0%, each image will already be visible, and will stay visible until it fades out from 10.5% to 12.5% and be invisible for the rest of the time until 98%, while the rest of the images each take their turn at going from 0% to 12.5% (remember the staggered start graphic above). Then at 98% it starts fading back in to be ready for when the animation starts over at 0%. Why 12.5%? Because 100% divided by 8 (the total number of slides) is 12.5%.