In this tutorial we are going to create image slider with the help of  CSS3 Keyframe Animation



HTML

Html is preety simple we have a div with a class of `image-slider` then a section with class `slider` inside the section we have images with the class `image`

<html>
<head>
<title>Image Slider</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="image-slider">
<section class="slider">
<img class="image" src="img/slide-1.jpg">
<img class="image" src="img/slide-2.jpg">
<img class="image" src="img/slide-3.jpg">
<img class="image" src="img/slide-4.jpg">
<img class="image" src="img/slide-5.jpg">
<img class="image" src="img/slide-6.jpg">
<img class="image" src="img/slide-7.jpg">
</section>
</div>
</body>
</html>

CSS

basically we are changing the postion of the image on every keyframe which looks like images is sliding

.image{
position: absolute;
top: .1%;
left: .1%;
}
.image-slider{
width: 1000px;
height: 500px;
position: relative;
margin-left: -100px;
overflow: hidden;
background:url("../img/slide-8.jpg");
left: 20%;
border-radius: 10px;
}
section img{
position: absolute;
width: 1000px;
height: 500px;
margin-right: -200px;
}
section img:nth-of-type(7){
animation: slider 32s linear 4s infinite;
}
section img:nth-of-type(6){
animation: slider 32s linear 8s infinite;
}
section img:nth-of-type(5){
animation: slider 32s linear 12s infinite;
}
section img:nth-of-type(4){
animation: slider 32s linear 16s infinite;
}
section img:nth-of-type(3){
animation: slider 32s linear 20s infinite;
}
section img:nth-of-type(2){
animation: slider 32s linear 24s infinite;
}
section img:nth-of-type(1){
animation: slider 32s linear 28s infinite;
}
@keyframes slider{
0% {left: 0px;}
50% {left: -7000px;}
/*75% {left: 4000px;}*/
/* 100%{left: 3500px;}*/
}