CODEWITHSUNDEEP
htmlcss
Mike Borman
Mike Borman

Reputation: 23

@keyframes not working for slideshow

Cannot seem to get my Image slider to work, I am intending to use this as a header for my page but the images just wont slide. I have tried prefixes for chrome but they have not made a difference. 

<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 infinate;
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%;
}

}

Upvotes: 2

Views: 231

Answers (1)

Wais Kamal
Wais Kamal

Reputation: 6180

You have only set @-webkit-keyframes and -webkit-animation. You must also set @keyframes and animation (without -webkit-). Next, you do not use prefixes for the left, right, top, or bottom CSS properties. You also misspelled infinite for infinate. Here is the corrected code:

.slider {
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.slider figure {
  margin: 0 auto;
  padding: 0;
  width: 200%;
  animation: 5s slidy infinite;
  -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% {
    left: 0%;
  }
  45% {
    left: 0%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}
<div class ="slider">
  <figure>
    <img src="slider-test-image-1.jpg" >
    <img src="slider-test-image-2.jpg" >
  </figure>
</div>

Upvotes: 2

Related Questions