How to create Image Slider using HTML and CSS ?

How to create Image Slider using HTML and CSS?

image slider using html and css | image slider using html | image slider using css| image slider using pure css | how to create image slider in html | how to create image slider in html and css | how to create image slider using pure css | css image slider | image slider in css | how to create image slider using html and css | how to create image slider without javascript

Hello friends, welcome to our new tutorial on How to create Image slider using HTML & CSS.

Today we are going to tell you how to create image slider using HTML and CSS. When we talk about pure CSS that means we are going to complete our task using HTML and CSS only. There is no use of JavaScript or any other scripting language. Scripting languages help us to complete our task smoothly but now in CSS3 we can do many more things beyond our imagination.

So lets get started.

So first of all we downloaded 5 cute animals images from www.google.com with size of 1024x768 px. You can take images by your own but you need to be careful with the image size what you are going to set in CSS.

Now we have created two files called imgslider.html for our TML code and style.css for our CSS code. Now we put them together in a folder.

Now open your HTML file on your favorite text editor or notepad.

Now we are going to start our HTML code first.

Here we gave title to our webpage is ImageSlider and linked our style.css file to HTML document using link element or tag.

now under body we took a div element and define it with the id “slider_1”, inside this div element we took 5 another child div element.

now we put our images inside our document using img element. Each img element will comes under child div elements separately. Check below code.

So here we done with our HTML code file. Save it and close the document.

Here is full HTML code:

<!DOCTYPE html>
<html>
<head>
<title>ImageSlider</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slider_1">
<div>
    <img src="img1.jpg">
</div>
<div>
    <img src="img2.jpg">
</div>
<div>
    <img src="img3.jpg">
</div>
<div>
    <img src="img4.jpg">
</div>
<div>
    <img src="img5.jpg">
</div>
</div>
</body>
</html>

now open style.css file to your favorite text editor or notepad and paste the below code.

div#slider_1 {

overflow: hidden;

margin: auto;

width: 768px;

height: 100%;

}

div#slider_1 div {

position: relative;

width: 500%;

margin: 0;

left: 0;

font-size: 0;

animation: 20s slider infinite;

}

div#slider_1 div img {

width: 768px;

float: left;

}

@keyframes slider {

0% { left: 0%;}

15% { left: 0%;}

20% { left: -100%; }

35% { left: -100%; }

45% { left: -200%; }

55% { left: -200%;}

60% { left: -300%;}

70% { left: -300%;}

75% { left: -400%;}

95% { left: -400%;}

}

in CSS code we given size to our main div element with the id slider_1, and set the margin auto so our document come to the center. To know much more about margin and how it works, check our article on margin and padding.
Link the text.

Then we setup the all div’s element insider main div element in the code.

After all we setup our image sizes.
At last we define some key-frame of animation.
Note: this sliding activity has been done by CSS animation.

Finally save your file and run imgslider.html file to your browser.

The benefit is you have no need to use any external JavaScript for your website slider, so if any browser may off the JavaScript activities your slider will run that time also.

Horrey you have done it. That's all for today feel free to leave you comment below.