Slider Automatico

by Slee

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Slider AutomĂ tico</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="slider">
    <ul>
        <li>
            <img src="https://i.pinimg.com/originals/74/52/db/7452db2aafa89196801ef4fe680137e0.jpg">
        </li>
        <li>
            <img src="https://s1.1zoom.me/big0/160/354276-admin.jpg">
        </li>
        <li>
            <img src="https://mobimg.b-cdn.net/pic/v2/gallery/preview/goroda-pejzazh-ulicy-22228.jpg">
        </li>
        <li>
            <img src="http://2.bp.blogspot.com/-dNtt1v-HAOE/UFdRpT_pY9I/AAAAAAAABXw/gBzxja1td3Y/s1600/fondos-escritorio-ciudades-1280.jpg">
        </li>
    </ul>
</div>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.slider{
  width: 100%;
  height: 600px;
  overflow: hidden;
}
.slider ul{
    display: flex;
    animation: cambio 20s infinite alternate linear;
    width: 400%;
}
.slider li{
    width: 100%;
    list-style: none;
}
.slider img{
    width: 100%;
    height: 100%;
}
@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: 100vh;
}
}