Having trouble getting my image slider to function properly. I want to use it as a header for my page, but the images are not sliding like they should. I've attempted using prefixes for Chrome, but that hasn't solved the issue.
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<div class ="slider">
<figure>
<img src="slider-test-image-1.jpg" >
<img src="slider-test-image-2.jpg" >
</figure>
</div>
<body>
</body>
<html>
This is the CSS
.slider{
margin:0 auto;
padding:0;
overflow: hidden;
position:relative;
}
.slider figure{
margin:0 auto;
padding: 0;
width:200%;
-webkit-animation: 5s slidy infinite;
position:relative;
left:0;
}
.slider figure img{
margin:0 auto;
padding: 0;
overflow: hidden;
float:left;
width:50%;
position:relative;
}
@-webkit-keyframes slidy{
0%{
-webkit-left:0%;
}
45%{
-webkit-left:0%;
}
50%{
-webkit-left:-100%;
}
100%{
-webkit-left:-100%;
}
}