Mohan Chaudhary's Blog

How to make image slider using CSS

Mohan Chaudhary's photo
Mohan Chaudhary
·

2 min read

We have used javascript for image slider but can we make a nice and animated slider just with the help of CSS. Today we will talk about this. So let's understand how without wasting time.

Let's Start

First open your favorite editor or VS code editor. In this html file we take a class which name is header, And in this class we apply CSS. And we start writing HTML as HTML is written below-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Img Slider Using CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">

    </div>
</body>
</html>

Now, In header css we give height width and also fix background image and we take an animation variable and also give its time duration. After this , we take a keyframe on animation name and change the image when the animation is 25% complete, 50% complete, and again when the animation is 100% complete. And we start writing CSS as CSS is written below-

*{
    height: 0;
    padding: 0;
}
.header{
    width: auto;
    height: 600px;
    background-size: 100% 100%;
    animation: changeImg 25s linear infinite;
}

@keyframes changeImg{
    0%{
        background-image: url('img/img-2.jpg');
    }
    25%{
        background-image: url('img/img-3.jpg');
    }
    50%{
        background-image: url('img/img-4.jpg');
    }
    75%{
        background-image: url('img/img-5.jpg');
    }
    100%{
        background-image: url('img/img-6.jpg');
    }
}

I think many of you are aware of this concept. And many people would not know.And I think this is the easiest way to create an image slider without.

HTML5CSSJavaScriptWeb Developmentwebdev