Slider manual y responsive, solo con CSS
Publicado en Publicación
Un sencillo "Slider" manual responsive utilizando sólo CSS y sin emplear javascript ni ningón otro framework.
Vista SLIDER:
código
Elementos HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Slider manual solo con CSS" />
<title>Slider</title>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/estilos.css">
</head>
<body>
<main>
<div class="slider">
<div class="diapositiva">
<input type="radio" name="boton" id="boton1" checked>
<label for="boton1"></label>
<img src="/img/1g.jpg">
</div>
<div class="diapositiva">
<input type="radio" name="boton" id="boton2">
<label for="boton2"></label>
<img src="/img/2g.jpg">
</div>
<div class="diapositiva">
<input type="radio" name="boton" id="boton3">
<label for="boton3"></label>
<img src="/img/3g.jpg">
</div>
<div class="diapositiva">
<input type="radio" name="boton" id="boton4">
<label for="boton4"></label>
<img src="/img/4g.jpg">
</div>
</div>
</main>
</body>
</html>
Reglas CSS
:root {
--ancho: 500px;
}
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: tan;
display: flex;
}
main {
max-width: 800px;
width: 96%;
min-height: 500px;
margin: auto;
background-color: rgba(255,0,0,0.1);
}
.slider {
max-width: var(--ancho);
height: calc(var(--ancho) / 1.78);
margin: 5% auto;
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
background-color: #333;
}
.slider input[type="radio"] {
display: none;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
transform: scale(0);
opacity: 0;
transition: all 0.5s ease-in;
outline: 1px solid transparent;
}
.slider input[type="radio"]:checked ~ img {
transform: scale(1);
opacity: 1;
}
.slider input[type="radio"] + label {
position: relative;
z-index: 100;
margin: 10px;
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
box-shadow: 0 0 0 2px #000;
background-color: hsla(0, 0%, 100%, 1);
}
.slider input[type="radio"]:checked + label {
box-shadow: 0 0 0 2px #000,
0 0 0 2px #fff inset;
background-color: hsla(0, 100%, 50%, 1);
}
label:hover {
cursor: pointer;
}
