Mi intención es crear un slider manual que pase de una imagen a otra al clicar sobre sus miniaturas. De momento, he desarrollado este código:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1, maximum-scale=1, minimun-scale=1">
<title>Ejercicio 5</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
min-height: 100vh;
background-color: #F5F6CE;
}
.slider{
width: 700px;
height: 360px;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.slider ul{
width: 400%;
height: 300px;
display: flex;
overflow: hidden;
order: 1;
}
.slider ul li{
list-style: none;
width: 100%;
height: 100%;
}
.slider ul li img{
width: 100%;
height: 100%;
}
.slider input[type="radio"]{
display: none;
}
.slider input[type="radio"] + label{
display: block;
width: 25%;
height: 60px;
order: 2;
}
#boton_1 + label{
background-image: url("imagenes/pez_1.jpg");
background-size: 100% 100%;
}
#boton_2 + label{
background-image: url("imagenes/pez_2.png");
background-size: 100% 100%;
}
#boton_3 + label{
background-image: url("imagenes/pez_3.jpg");
background-size: 100% 100%;
}
#boton_4 + label{
background-image: url("imagenes/pez_4.jpg");
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="slider">
<input type="radio" id="boton_1">
<label for="boton_1"></label>
<input type="radio" id="boton_2">
<label for="boton_2"></label>
<input type="radio" id="boton_3">
<label for="boton_3"></label>
<input type="radio" id="boton_4">
<label for="boton_4"></label>
<ul>
<li><img src="imagenes/pez_1.jpg" alt="pez_1"></li>
<li><img src="imagenes/pez_2.png" alt="pez_2"></li>
<li><img src="imagenes/pez_3.jpg" alt="pez_3"></li>
<li><img src="imagenes/pez_4.jpg" alt="pez_4"></li>
</ul>
</div>
</body>
</html>
Como se puede apreciar, hay un slider que contiene a las miniaturas en primer lugar (reconfiguradas con order:2 para que salgan en segundo lugar) y las imágenes principales en una lista.
La lista ocupa cuatro veces el tamaño del slider para que, al aplicar display:flex y ajustar cada li al 100% del ancho de la lista, los elementos de esta se repartan equitativamente a lo largo este 400%, es decir, que cada li ocuparía un 100% del slider.
El problema viene cuando ajusto las imágenes de cada li al 100% del ancho del mismo para que no haya huecos dentro del elemento. Al aplicar dicho ajuste, la lista pasa a tener un ancho del 100% del slider, y no del 400%. Así pues, las imágenes contenidas en la lista pasan a ocupar un 25% del ancho del slider y no el 100%.
Por si fuera útil el dato, cada imagen tiene dimensiones diferentes y no importa cuáles sean estas dimensiones.
¿Dónde falla mi lógica? Gracias.