<!DOCTYPE html>
<html lang="es">
<head>
<litle> <center> Slider automatico </center></litle>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<div class="slider">
<ul>
<li><img src="img/23.jpg" alt=""></li>
<li><img src="img/22.jpg" alt=""></li>
<li><img src="img/24.jpg" alt=""></li>
<li><img src="img/25.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
.slider {
width: 70%;
margin: auto;
overflow: hidden;
}
.slider ul {
display: flex;
padding: 0;
width: 400%;
animation: cambio 20s infinite alternate linear;
}
.slider li {
width: 100%;
list-style: none;
}
.slider img {
.slider {
width: 70%;
margin: auto;
overflow: hidden;
}
.slider ul {
display: flex;
padding: 0;
width: 400%;
animation: cambio 20s infinite alternate linear;
}
.slider li {
width: 100%;
list-style: none;
}
.slider img {
width: 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%;}
}
slider {
width: 70%;
margin: auto;
overflow: hidden; //para que los elementos que estes fuera no se vean
}
.slider ul {
display: flex; //para que cada imagen se ponga al lado de la otra
padding: 0;
width: 400%; //espacio entre las imagenes
animation: cambio 20s infinite alternate linear; // propiedad para animacion de las imagenes y que cuando llegue a la 4 imagen
// se devuelva y no valla hasta la primera imagen .
}
.slider li {
width: 100%;
list-style: none;
}
.slider img {
width: 100%;
}
@keyframes cambio { //paradas de las imagenes
0% { margin-left: 0;} // 0% al 20% este la primera
imagen
20% { margin-left: 0;}
// este espacio es el tiempo en que la imagen transcurra
25% {margin-left: -100%;} // porque cada imagen la tenemos del 100%
45% {margin-left: -100%;}
50% {margin-left: -200%;}
70% {margin-left: -200%;}
75% {margin-left: -300%;}
100% {margin-left: -300%;}
}
