0

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.

2
  • estas usando muchos %, el problema está en que las imágenes se adaptan al contenedor, eso hace que en vez de aparecer 1 del tamaño del contenedor aparezcan las 4.. ademas necesitas usar javascript para hacer la transición entre una imagen a la otra. Commented el 20 ago. 2021 a las 18:28
  • En cuanto al empleo de muchos porcentajes, no entiendo por qué eso es un problema. Si están bien planteados, no deberían fallar. En cuanto al uso de javascript para las transiciones, es falso: ya he hecho otros dos sliders con solo HTML y CSS. De hecho, en estos otros sliders he empleado los mismos porcentajes que aquí en cuanto a medidas para las imágenes y funcionan perfectamente. Por eso me extraña que aquí no cuajen. Commented el 20 ago. 2021 a las 18:35

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.