<

Go Premium for a chance to win a PS4. Enter to Win

x

Build a Pure CSS3 Slideshow (no javascript here)

Published on
26,327 Points
18,827 Views
10 Endorsements
Last Modified:
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
Comment
Author:Gary
10 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
Cool Stuff!
0
 

Expert Comment

by:fijiboy
This is awesome, is there anyway you could include a caption with the image during the slide for each picture?
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
>is there anyway you could include a caption with the image during the slide for each picture

That would be a great question to ask https://secure.experts-exchange.com/askQuestion.jsp
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Author Comment

by:Gary
@fijiboy
You just repeat your keyframe animation for the text using the same intervals and percentages. Or as Scott says...
0
 
LVL 60

Expert Comment

by:Julian Hansen
@Gary,
Interesting article - new to css animations but this gave me a good leg up.

BTW typo in section 3 paragraph 5
12.5%, 18.5% and 96%
Thing it should be

12.5%, 16.5% and 96%
0
 
LVL 58

Author Comment

by:Gary
Thanks, will fix it.
0
 
LVL 46

Expert Comment

by:aikimark
What would you recommend for large slide shows?  Iteration?  Non-timed (click) transitions?
0
 
LVL 58

Author Comment

by:Gary
If you want a click event then you might be better off using a jquery plugin.
0
 

Expert Comment

by:CAN TAMAKLOE
The codes are good.But I would have prefer if you add a caption of images to support.
0
 

Expert Comment

by:JJ Gabuya
Can you code for 15 images?
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Join & Write a Comment

In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month