IMAGES SLIDE SHOW BY HTML5 AND CSS3

December 17, 2013

<!DOCTYPE html>
<html>
<head>
<title>
Working with image
</title>
<style>

div#slideshow {
position: relative;
background: #000;
overflow:hidden;
}

div#slideshow, figure#imagestrip img {
width: 500px;
height: 400px;
float: left;
}

figure#imagestrip {
position: absolute;
width: 2000px;
margin: 0;
}

@keyframes slider {
0% { transform: translateX(0px); }
20% { transform: translateX(0px); }

22% { transform: translateX(-500px); }
45% { transform: translateX(-500px); }

50% { transform: translateX(-1000px); }
70% { transform: translateX(-1000px); }

75% { transform: translateX(-1500px); }
95% { transform: translateX(-1500px); }

100% { transform: translateX(-2000px); }
}

@-webkit-keyframes slider {
0% { transform: translateX(0px); }
20% { transform: translateX(0px); }
22% { transform: translateX(-500px); }
45% { transform: translateX(-500px); }
50% { transform: translateX(-1000px); }
70% { transform: translateX(-1000px); }
75% { transform: translateX(-1500px); }
95% { transform: translateX(-1500px); }
100% { transform: translateX(-2000px); }
}
figure#imagestrip {
animation: slider 10s infinite;
}
</style>
</head>
<body>

<div id=slideshow>

<figure id=imagestrip>
<img src=1.jpg alt="Photograph of a Black kite">
<img src=2.jpg alt="Profile of a Red kite">
<img src=3.jpg alt="Pelicans on moorings at sea">
<img src=4.jpg alt="Photograph of Pariah kite">
</figure>

</div>
</body>
</html>