Summer Training batches for B.Tech students are starting in may and june - Registration Open
Brand
(+91) - 78915-90002 - 97828-60519

Creating A Image Slider Using With HTML And CSS3 Only

Creating A Image Slider Using With HTML And CSS3 Only

In this tutorial you will learn how to create an image slider using HTML and CSS3 only and without any javascript. here we use CSS3 properties animation and @keyframes for image sliding.

[step:1] Start a div element with class box.
[step:2] Their in div start another div with class sliderbox.
[step:3] In this div call images for creating slider, here you call some images as your wish.
[step:4] Now close both div.

<html>
<head>
<title>Create A Slider With CSS3 And HTML tutorial By - infonic Training</title>

</head>

<body>

<div class="box">
	<div class="sliderbox">
                           <img src="slider/1.png">
                           <img src="slider/2.png">
                           <img src="slider/3.png">
                           <img src="slider/2.png">
        </div>
</div>
</body>
</html>

CSS Code Starting Here
CSS3:-animation property is using for give animation effect on the slide and @keyframes is using for hold the setting of animation and it also using for given breaks between side.

.box{ width:50%; margin:0 auto; margin-top:100px; overflow:hidden;}

.sliderbox
{ position:relative;
width:2800px;
animation-name:slider;
animation-duration:20s;
animation-iteration-count:infinite;}

.sliderbox img{ float:left;}

@keyframes slider
	{
	0%{left:0px;}
	
	20%{left:0px;}
	
	25%{left:-700px;}
	
	45%{left:-700px;}
	
	50%{left:-1400px;}
	
	70%{left:-1400px;}
	
	75%{left:-2100px;}

	95%{left:-2100px;}
	
	100%{left:-2800px;}	
	
	}


Explanation: Here above in this tutorial you learned that an image slider is created by only HTML and CSS3. You also can create a pure image slider without any javascript and build a simple CSS3 based image slider with HTML. Here the code of HTML and CSS3 is so easy that every person understand easily.