.slider {
    width: 100%;
    margin: auto;
    overflow: hidden;
  
}

.slider ul {
    display: flex;
    padding: 0;
    width: 300%;
    
    animation: cambio 10s infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

.slider li {
    width: 100%;
    list-style: none;
}

.slider img {
    width: 100%;
}

/*paradas a la animacion cambio
porcentajes de los 20 segundos que dura la animacion*/
@keyframes cambio {
    0% { margin-left: 0;}
    33% { margin-left: -0%;}
    
    38% {margin-left: -100%;}
    66% {margin-left: -100%;}
    
    71% {margin-left: -200%;}
    100% {margin-left: -200%;}
}