In the code below I try to experiment with animations.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio_2</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimun-scale=1" />
<style type="text/css">
.slider{
width: 22.25%;
margin: auto;
overflow: hidden;
}
/*Cuando llega a la última imagen, regresa hacia la primera directamente*/
.slider #ul_1{
width: 400%;
padding: 0;
display: flex;
animation: cambio_1 20s infinite;
}
/*Cuando llega a la última imagen, regresa a la primera pasando antes por el resto*/
.slider #ul_2{
width: 400%;
padding: 0;
display: flex;
animation: cambio_2 20s infinite alternate;
}
.slider ul li{
width: 100%;
list-style: none;
}
.slider ul li img{
width: 100%;
}
@keyframes cambio_1{
0% {margin-left: 0;}
20% {margin-left: 0;}
25% {margin-left: -100%;}
45% {margin-left: -100%;}
50% {margin-left: -200%;}
65% {margin-left: -200%;}
70% {margin-left: -300%;}
95% {margin-left: -300%;}
}
@keyframes cambio_2{
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%;}
}
</style>
</head>
<body>
<div class="slider">
<ul id="ul_1">
<li><img src="imagenes/paisaje_1.jpg" alt="paisaje_1"></li>
<li><img src="imagenes/paisaje_2.jpg" alt="paisaje_2"></li>
<li><img src="imagenes/paisaje_3.jpg" alt="paisaje_3"></li>
<li><img src="imagenes/paisaje_4.jpg" alt="paisaje_4"></li>
</ul>
<ul id="ul_2">
<li><img src="imagenes/paisaje_1.jpg" alt="paisaje_1"></li>
<li><img src="imagenes/paisaje_2.jpg" alt="paisaje_2"></li>
<li><img src="imagenes/paisaje_3.jpg" alt="paisaje_3"></li>
<li><img src="imagenes/paisaje_4.jpg" alt="paisaje_4"></li>
</ul>
</div>
</body>
</html>
However, I have a question regarding cascading inherit width . I understand the following:
(1) The slider will be 22.25% of the width of the body .
(2) Each ul will have a width four times greater than the slider , since there are four images and we want each image to occupy 100% of the slider when it appears.
(3) Here my question . From what I see experimentally, the li elements must have a width of 100% so that all the elements of the list are evenly distributed. Now, according to cascading inheritance and the logic of relative measures, shouldn't each li , according to the defined width instruction, occupy the entire width of the list to which it belongs? In this way, each li element would be four times the slider.
(4) We adjust the width of the image to that of the li so that there are no internal gaps on the sides.
If we join point 3 with point 4, it is evident that each image should occupy a width four times greater than the slider . However, the fit seems perfect and the animations run smoothly.
How is the cascade acting then with the width of the li ? Thanks.
The main question:
All this is correct with a
display
differentflex
property for the container and the explanation is very simple:In this example you can see that the first slider has 5 elements and between all of them they occupy only the available width; the second does not occupy it because the measurements between all of them are less than 100%.
To be more specific, according to your final question:
The answer is taken from the flex manual :