Simple Image Slider Using Only CSS – EASY

We are going to create a simple image slider using only CSS.

First, let’s create the markup.

Create the Slider Markup

Create div with a class of “img slider”.
Inside this div will be our slider div container.
Let’s name this “img holder”.
Then inside this container, we are going to add an image tag for our image.

Let’s see a quick preview…

We are going to add another 2 slides so let’s duplicate the slide container twice. …And change the image file name.

Adding the CSS Styles

To add our CSS styles, let’s open a style tag inside the head tag.

For our parent slider div element, let’s add a maximum width of 960 pixels, a width of 100%, and add height, and margin to center-align horizontally.

Next, for our slide container.

Add a position absolute CSS so our slides are stacked on each other.
And then we hide every slide by adding an opacity value of zero.

We are going to use a CSS animation to make every slide appear one at a time.

Let’s create a keyframe called “slide”.

This keyframe simply tells us when should the image appear at what time depending on the timeframe.

I will explain this keyframe that we created after we add our animation value.

Now, let’s add CSS for the first slide container.

Add an animation property with the value of slide (the keyframe that we created) then 9 seconds as the total time for all the 3 slides going to appear.

Then add linear for the timing to the slide transition smooth, and lastly add infinite so the keyframe animation will loop.

I’ll just quickly add CSS support for the other browsers.

Next, let’s target the second slide. For the second slide, we will add an animation-delay of 3 seconds. So it appears at the same time the first slide fades out.

We need to update the keyframe since we have 9 seconds for each loop and the first loop should fade out at 3 seconds.
So, add 30% then it will slowly disappear on 40% and onwards.

Lastly, for the third slide.
Copy and paste the same CSS and change the selector for the third slide container.
For this one, we are just changing the animation delay to 6 seconds so the slide will appear after the 2 other slides fade out.

CSS Code

.img_slider{
        max-width: 960px;
        width: 100%;
        height: 600px;
        margin: 100px auto;
    }
    .img_holder{
        position:absolute;
        opacity: 0
    }

    @keyframes slide {

        0%{
            opacity: 0;
        }
        5%{
            opacity: 1;
        }
        30%{
            opacity: 1;
        }
        40%{
            opacity: 0;
        }
    }
    @-webkit-keyframes slide {

        0%{
            opacity: 0;
        }
        5%{
            opacity: 1;
        }
        30%{
            opacity: 1;
        }
        40%{
            opacity: 0;
        }
    }
    @-moz-keyframes slide {

        0%{
            opacity: 0;
        }
        5%{
            opacity: 1;
        }
        30%{
            opacity: 1;
        }
        40%{
            opacity: 0;
        }
    }

    .img_holder:first-child{
        -webkit-animation: slide 9s linear infinite;
        -moz-animation: slide 9s linear infinite;
        animation: slide 9s linear infinite;;
    }
    .img_holder:nth-child(2){
        -webkit-animation: slide 9s linear 3s infinite;
        -moz-animation: slide 9s linear 3s infinite;
        animation: slide 9s linear 3s infinite;;
    }
    .img_holder:nth-child(3){
        -webkit-animation: slide 9s linear 6s infinite;
        -moz-animation: slide 9s linear 6s infinite;
        animation: slide 9s linear 6s infinite;;
    }