How to create photo slider in html
......................................................................................................................................
<html>
<head>
<title> image slider</title>
<style type="text/css">
#slider{
overflow:hidden;
}
#slider figure{
position:relative;
width:500%;
margin:0;
left:0;
animation:20s slider infinite;
}
#slider figure img{
float:left;
width:10%;
}
@keyframes slider{
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%;
}
}
</style>
</head>
<body bgcolor="pink">
<div id="slider">
<figure>
<img src="img/1.png">
<img src="img/2.png"">
<img src="img/3.png">
<img src="img/4.png">
</body>
</html>
..................................................................................................................................................................
