May 3, 2019

Pure HTML CSS Slide Show

In this post you will learn how can you create a image slide show using HTML, CSS not other language it’s too easy guys firstly you should have to copy HTML code and create a index.html file, open it with notepad++ or other code editor and paste it over there. same work you will have to do with CSS code you can use any images just like I used…

If you are still confused then watch this tutorial…

Watch this tutorial for better understanding

Copy HTML Code :

<!doctype html>
<html>
	<head>
		<title>Slide Show</title>
		<link rel="stylesheet" href="style.css" type="text/css"/>
	</head>
	<div class="slider">
	</div>
</html>

Copy CSS Code :

body{
	margin:0;
	padding:0;
	background:#313131;

}
.slider{
	width:900px;
	height:554px;
	background:url(1.jpg);
	background-size:cover;
	margin:100px auto;
	animation:slide 15s infinite;
}

@keyframes slide{
	25%{
		background:url(2.jpg);
		background-size:cover;
	}
	50%{
		background:url(3.jpg);
		background-size:cover;
	}
	75%{
		background:url(4.jpg);
		background-size:cover;
	}
	100%{
		background:url(1.jpg);
		background-size:cover;
	}
	
}

Pure HTML CSS Slide Show

Copy HTML Code :

Copy CSS Code :

About Author

admin

Add a Comment

Copy HTML Code :

Copy CSS Code :

Related Posts

About Author

admin

Add a Comment