imageslider_feature_img

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 functionality?

Softwares used for building this 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. See the below image for the same.

imageslider_filestr.

 


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.
-->
<html>
<head>
<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"/>
</head>
<body>
<div id="slider">
<figure>
<img src="sliimg1.jpg" alt>
<img src="sliimg3.jpg" alt>
<img src="sliimg4.jpg" alt>
<img src="sliimg5.jpg" alt>
</figure>
</div>
</body>
</html>

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 anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

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

Have a great time! Sayonara!