Slider automático y responsive, solo con CSS
Publicado en Publicación
Un sencillo "Slider" automático y responsive utilizando sólo CSS y sin emplear javascript ni ningúnn otro framework. También he implementado un botón de pausa.
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="(cc) 3con14" content="Slider automático solo con CSS" />
<title>Slider automático</title>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/estilos.css">
</head>
<body>
<div class="container">
<h3>Slider automático solo con CSS</h3>
<input type="checkbox" id="pausa">
<div class="slider">
<div class="show">
<img src="/img2/wpp1_02.jpg" alt="">
<img src="/img2/wpp1_03.jpg" alt="">
<img src="/img2/wpp1_16.jpg" alt="">
<img src="/img2/wpp1_05.jpg" alt="">
</div>
</div>
<label for="pausa">Stop</label>
</div>
</body>
</html>
Reglas CSS
/**
* Slider automático de 4 imágenes
* Solo CSS, responsive
* (cc) 3con14.pro
*/
:root {
--base : 480px;
--ancho : calc(var(--base) * 1);
}
* {
margin : 0;padding: 0;
box-sizing : border-box;
}
html {
font-size : 16px;
color : #fff;
text-align : center;
background : tan;
}
body {
min-height : 100vh;
display : flex;
}
.container {
max-width : var(--ancho);
width : 96%;
margin : auto;
background-color : rgba(0,0,0,0.1);
}
.slider {
max-width : var(--ancho);
height : calc(var(--ancho) / (16 / 9) );
outline : 2px solid hsla(0, 100%, 100%, 1);
position : relative;
margin : auto;
overflow : hidden;
background-color: #000;
}
.show {
position : absolute;
top : 0;
left : 0;
line-height : 0;
display : table;
width : 100%;
height : 400%;
animation : ani 16s ease-out infinite alternate;
}
/*
.show:hover {
cursor : pointer;
animation-play-state : paused;
} */
img {
max-width : 100%; /* 24.84% en FF */
height : auto;
opacity : 1;
/* display : table-cell; */ /* para FF */
}
@keyframes ani {
0%,20% { top: 0; opacity: 1;}
25% { top: 0; }
26% { opacity: 0; }
27%,47% { top: -100%; opacity: 1;}
52% { top: -100%; }
53% { opacity: 0; }
54%,74% { top: -200%; opacity: 1;}
79% { top: -200%; }
80% { opacity: 0;}
81%,100% { top: -300%; opacity: 1;}
}
h3 { margin: 0.2em 0; }
input[type="checkbox"] { display: none; }
label {
margin : 1em;
line-height : 2em;
cursor : pointer;
}
input[type="checkbox"]:checked ~ label {
color: red; font-weight: 900;
}
input[type="checkbox"] + div.slider > div.show {
animation-play-state: running;
}
input[type="checkbox"]:checked + div.slider > div.show {
animation-play-state: paused;
}
