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

.slider ul {
    display: flex;
    padding: 0;
    width: 400%;    
    animation: cambio 12s infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

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

.slider img {
    width: 100%;
    height: 420px;
}

@keyframes cambio {
    0% {margin-left: 0;}
    35% {margin-left: 0;}

    45% {margin-left: -135%;}
    75% {margin-left: -135%;}

    85% {margin-left: -283%;}
    100% {margin-left: -283%;}

    
}