Build a Pure CSS3 Slideshow (no javascript here)

Gary
CERTIFIED EXPERT
Published:
Updated:
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight!

There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicated than it needs to be and some just have it wrong.
Using javascript or jQuery for animating a slideshow is great but with CSS3 you no longer need javascript.
In fact, using CSS for your slideshow animation actually uses less browser resources making it work quite a bit smoother.  When you use javascript each animation has to be calculated each time, using up more memory and CPU cycles.
When you use CSS the browser knows exactly what is supposed to happen and when it is supposed to happen, so only needs to devote very little resources to executing it.
You can see the differences in resources at this link:
http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/

So lets begin...
We are going to have 8 images and we want each image to show for 15 seconds before the next image shows.
This means 8 images multiplied by 15 seconds equals a total slideshow time of 120 seconds.
We will also have a 5 second transition as the current image fades out and the next one begins to show.
Remember this as it is important following on.

1. First we need some markup for our images.
We'll start off with our container DIV which will hold our images
<div class="container">
                          <img src="http://mrg.bz/HYuRbQ">
                          <img src="http://mrg.bz/H1qdIq">
                          <img src="http://mrg.bz/ToIsxz">
                          <img src="http://mrg.bz/pA0lyL">
                          <img src="http://mrg.bz/euedOa">
                          <img src="http://mrg.bz/beVsO7">
                          <img src="http://mrg.bz/GLVvgh">
                          <img src="http://mrg.bz/qcbYU6">
                      </div>

Open in new window


That is all the HTML you need and I don't think it needs any further explanation.


2. Adding some styles to position the images
We want the images to stack up on top each other so they all occupy the same space - so we just need set the position of the image to absolute.
But because the images are absolutely positioned we also need to give the container DIV a relative position so our images stay within the container

<style>
                      .container {
                       position:relative;
                      }
                      .container img {
                       position:absolute;
                      }
                      </style>

Open in new window


One thing to note  - because we have stacked our images on top of each other our slide show will actually start with image 8, move to image 7 then image 6 and so on.
So remember to reverse the order of you slideshow if the order is important.


3 Adding our keyframes animations

Let's begin by showing you the code that tells the browser to show and hide our images then we can explain it.

<style>
                      @keyframes xfade{
                        0%{
                          opacity: 1;
                        }
                        12.5% {
                          opacity:1;
                        }
                        16.6% {
                          opacity:0;
                        }
                        96% {
                          opacity:0;
                        }
                        100% {
                          opacity:1;
                        }
                      }
                      </style>

Open in new window


@keyframes - here we are declaring our CSS keyframes class
xfade - this is the animation name


So here we have 5 keyframes going from 0% to 100% - 5 is the minimum we need and for a slideshow it is all we need.
If you want to get fancy with animating text and other elements on the slideshow then you may need more keyframes.

The opacity always starts at 0% (the beginning of the animation) and ends at 100% (the end of the animation).
Remember our slideshow lasts 120 seconds meaning our keyframes begin at 0 seconds (0%) and ends at 120 seconds (100%).

In between we fade out the current image so the next image becomes visible.

Then we have the 3 middle keyframes that slowly hide and reshow the image...
12.5%, 16.5% and 96% will always depend on the number of images you have and the amount of time each image should be visible for.

So for the second step we divide 100(%) by 8 images - this gives us 12.5% - think this is self explanatory.
If it was 7 images then it would be 14% (we always round any decimals to the nearest .5).


The formula for our third and fourth step is:

Transition Time * 100 / Slideshow Total Time = ?

Open in new window


This means for us our calculation is:

5 seconds * 100 / 120 seconds = 4.1 (percent)

Open in new window


For the third keyframe we add it 12.5% to give us 16.5%.
For the fourth keyframe we take it away from 100% to give us 96%.

Now we have our third and fourthkey frame.

And that is our keyframes done.
 

4. Image Keyframes

The keyframe animation class allow us to set when an animation should begin.

Lets look at the first part of our keyframe CSS:

.container img:nth-child(8) {
                        animation: xfade 120s 0s infinite;
                      }

Open in new window


This tells the browser that we want to call the keyframe animation called xfade at 0 seconds (in other words straight away) and repeat infinitely every 120 seconds.

So at 0 seconds image number 8 will begin the fade out and fade in animation we declared above.

The second class is almost the same:

.container img:nth-child(7) {
                        animation: xfade 120s 15s infinite;
                      }

Open in new window


The only difference here is we are targetting the 7th image and the xfade animation routine is not called until 15 seconds have passed (the amount of time a slide is visible).

And we just keep incrementing the 15 seconds for each image.
 

So the full CSS markup for the image animation CSS is like this:

<style>
                      .container img:nth-child(8) {
                        animation: xfade 120s 0s infinite;
                      }
                      .container img:nth-child(7) {
                        animation: xfade 120s 15s infinite;
                      }
                      .container img:nth-child(6) {
                        animation: xfade 120s 30s infinite;
                      }
                      .container img:nth-child(5) {
                        animation: xfade 120s 45s infinite;
                      }
                      .container img:nth-child(4) {
                        animation: xfade 120s 60s infinite;
                      }
                      .container img:nth-child(3) {
                        animation: xfade 120s 75s infinite;
                      }
                      .container img:nth-child(2) {
                        animation: xfade 120s 90s infinite;
                      }
                      .container img:nth-child(1) {
                        animation: xfade 120s 105s infinite;
                      }
                      </style>

Open in new window


And here is the full working demo
http://jsfiddle.net/GaryC123/vsuh32xa/

CSS3-Slideshow.zip

There is a small proviso - to keep the code above looking tidier I did not include the vender prefix for Safari and Chrome which means the keyframes class needs to be repeated using @-webkit-keyframes instead and for each of the animation lines in the image animation class you need to add a line for -webkit-animation like this:

.container img:nth-child(8) {
                          -webkit-animation: xfade 120s 0s infinite;
                          animation: xfade 120s 0s infinite;
                      }

Open in new window


So now you have seen how easy it is to create a nice looking slideshow with just a few lines of CSS.
This is only the beginning, from here you can add transitions for text on the images, slide the images in and out and so much more.
10
30,270 Views
Gary
CERTIFIED EXPERT

Comments (10)

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Author

Commented:
Thanks, will fix it.
aikimarkGet vaccinated; Social distance; Wear a mask
CERTIFIED EXPERT
Top Expert 2014

Commented:
What would you recommend for large slide shows?  Iteration?  Non-timed (click) transitions?
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Author

Commented:
If you want a click event then you might be better off using a jquery plugin.
The codes are good.But I would have prefer if you add a caption of images to support.
Can you code for 15 images?

View More

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.