Howto Create An Image Slider With Pure CSS3

Image slider is a popular effect and often used in portfolio sites and blogs. Most of these sliders are created by Javascript. But with CSS3′s strength, we can implement an image slider with only pure CSS3. This article will guide you to do that.

1. The HTML Markup

The HTML markup for image slider is so simple like this:

<div id="images">
    <img id="image1" src="1.jpg" />
    <img id="image2" src="2.jpg" />
    <img id="image3" src="3.jpg" />
    <img id="image4" src="4.jpg" />
    <img id="image5" src="5.jpg" />
</div>
<div id="slider">
    <a href="#image1">1</a>
    <a href="#image2">2</a>
    <a href="#image3">3</a>
    <a href="#image4">4</a>
    <a href="#image5">5</a>
</div>

We list all images in a div with id="images" and the slide control in a div with id="slider". Each slide control button is an a tag with the target points to corresponding image.

2. Basic CSS

We will style the images and slide control with some basic CSS to make them beautiful:

#images {
    width: 400px;
    height: 250px;
    overflow: hidden;
    position: relative;

    margin: 20px auto;
}
#images img {
    width: 400px;
    height: 250px;

    position: absolute;
    top: 0;
    left: -400px;
}
#images img:first-child {
    left: 0;
}
#slider a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
}
#slider a:hover {
    background: #C6E4F2;
}

In this code, we specify fixed width and height for both #images element and its images. We also set the position="relative" for #images, and position="absolute" for all images as well as their left and top attribute. This will make all images are put in the same place, they overlay each other.

Notice the negative left attribute. It is used to set the beginning position of images, i.e. out of the #images div. Why do we do that? Because we want images slide from left to right into the #image div box.

But when we launch the script, the #images div box is completely empty. We don’t want that, so we set left:0 for first image to display it in the #images div box.

After that, we get the following picture:

3. CSS3 Transition For Slider

To slide images with CSS3, we’ll use the transition feature. The CSS3 transition has the following syntax:

transition: transition-property transition-duration transition-timing-function transition-delay;

In our case, we need to slide from left to right, so the transition-property is left, but we will add some effect with opacity for cooler effect, so we use all for transition-property. The transition-timing-function should be linear. The delay and duration can be anything, I choose 1s.

So, the CSS3 for slide effect will be:

#images img {
    z-index: 1;
    opacity: 0;

    transition: all linear 1s;
    -o-transition: all linear 1s;
    -moz-transition: all linear 1s;
    -webkit-transition: all linear 1s;
}
#images img:target {
    left: 0;
    z-index: 9;
    opacity: 1;
}

Here we use the :target pseudo code to target the image when we click on the slide control button. When the image is targeted, we set its left attribute to 0 to make sure the image is displayed inside #images div box.

In this code, there’s one more thing needed to be noticed. That’s the z-index attribute. Because we put all images in the same place, so, when we need to display the targeted image, we should make it overlay others by specifying a higher z-index.

So, the complete CSS for the image slider is:

#images {
    width: 400px;
    height: 250px;
    overflow: hidden;
    position: relative;

    margin: 20px auto;
}
#images img {
    width: 400px;
    height: 250px;

    position: absolute;
    top: 0;
    left: -400px;
    z-index: 1;
    opacity: 0;

    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#images img:target {
    left: 0;
    z-index: 9;
    opacity: 1;
}
#images img:first-child {
    left: 0;
}
#slider a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
}
#slider a:hover {
    background: #C6E4F2;
}

You can see the demo or download the source code here:

View demo
Download source code

One disadvantage of this method that the first image is always displayed as a background. If you really don’t want to have it, there’s a solution: don’t use CSS3 transition for left property (set left:0 for original images), and use CSS3 transition for opacity only.