Image Slider Using HTML and CSS

Hello Friends,

In this blog tutorial, I am going to show you how to make an image slider using HTML and CSS.

this is really very simple and attractive functionality and will help you to make your site amazing and beautiful.

How will you develop this Image Slider functionality?

Softwares used for building this Image Slider functionality are given below:

NetBeans IDE

Xampp Softwares

Once you have successfully installed this above software then you just create a project with an appropriate name. and create a few files inside that project.

once you create all the required files and images then just copy and paste the below code.

slider.html :

<!DOCTYPE html>
HTML code for building image slider.
<title>Image Slider</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”slider.css” rel=”stylesheet” type=”text/css”/>
<div id=”slider”>
<img src=”sliimg1.jpg” alt>
<img src=”sliimg3.jpg” alt>
<img src=”sliimg4.jpg” alt>
<img src=”sliimg5.jpg” alt>

slider.css :

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }

body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;

In case of any queries, you can write us at we will get back to you ASAP.

Hope! you would have enjoyed this post to build an Image Slider.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!


I am a blogger by passion, a software engineer by profession, a singer by consideration and rest of things that I do is for my destination.