*{
 margin: 0;
 padding: 0;
}
.slider{
  width: 100%;
  height: 200px;
  overflow: hidden;
	

}
.slider ul{
 display: flex;
 animation: cambio 20s infinite alternate linear;
 width: 400%;
 
}
.slider li{
 width: 100%;
 list-style: none;
 height: 70%;
 
}
.slider img{
 width: 100%;
 float: left;
height: 200px;
 
	
}
@keyframes cambio{
 0%{margin-left: 0;}
 20%{margin-left: 0;}
 
 25%{margin-left: -100%;}
 45%{margin-left: -100%;}
 
 50%{margin-left: -200%;}
 70%{margin-left: -200%;}
 
 75%{margin-left: -300%;}
 100%{margin-left: -300%;}
}
@media only screen and (min-width:320px) and (max-width:768px){
.slider, .slider ul, .slider img{
 height: 55vh;
}
}