Slider adaptable sin JavaScript, sólo CSS

Esta forma de contruir un slider de imágenes que vi en CSS Science tiene dos cosas que me gustan. Una es que todo se monta con CSS y no es necesario utilizar JavaScript. La otra es que la caja del visor se adapta al tamaño de la ventana automáticamente. Es fácil comprobarlo abriendo y cerrando esta misma que estás leyendo.

El truco principal por así llamarlo, es flotar las imágenes una junto a otra y ocultarlas mediante un overflow. Luego, mediante unos botones radio a modo de controles, se van aplicando unos márgenes negativos equivalentes a 0, 1, 2, 3 y 4 veces el 100% del ancho del contenedor y así es como se logra ir viendo las distintas imágenes. Cinco en este ejemplo.

Una transición hace simula el efecto slider y como comentan en la página, todo lo demás es estilo.

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }

Gran ola

by Bartolo Manzano

Pez

by Armando Bronca

Estilo libre

by Dando T. Estopa

Vista de Río

by Johnny Melavo

En el arco

by Elba Tracio

Aunque entiendo la mecánica no es un código que sea capaz de explicar completamente, así que sólo os daré las instrucciones justas y necesarias para que lo podáis instalar.


El fichero CSS completo es algo extenso, así que aquí lo dejo plegado. Lo que hay que hacer con él es copiarlo y pegarlo antes del cierre }]]></b:skin>, en la parte de estilo. También podéis descargarlo desde este enlace o desde este otro.

Ver/Ocultar

#slider {
text-align: center;
margin: 0 auto;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#slider label, a {
color: #444444;
cursor: pointer;
text-decoration: none;
}
#slider label:hover, #slider a:hover {
color: #000 !important;
}
#slider label, #slider #active, #slider img { -moz-user-select:none;-webkit-user-select:none; }

#slider input {
display: none;
}
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }
#overflow {
width: 100%;
overflow: hidden;
}
#slider article img {
width: 100%;
max-width:100% !important;
}
#slides .inner {
width: 500%;
line-height: 0;
}
#slides article {
width: 20%;
float: left;
}
/* Slider Styling */
/* Control Setup */
#controls {
margin: -25% 0 0 0;
width: 100%;
height: 50px;
}
#controls label {
display: none;
width: 50px;
height: 50px;
opacity: 0.3;
}
#active {
margin: 23% 0 0;
text-align: center;
}
#active label {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
width: 10px;
height: 10px;
background: #bbb;
}
#active label:hover {
background: #ccc;
border-color: #777 !important;
}
#controls label:hover {
opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSY5olnoIbvE3nk9Ef5z94xuZnvW5onGOSPJqtl95zyoxcC8OYypYVsviijt7hFSImvy8qgjgmKgyd-3BzEZgyXYk4V6ePgCV-g1hIWnP4DlgCAd-ikVDEFaA1u_9v_3drGqVffMagHp0/s1600/nextrt.png') no-repeat;
float: right;
margin: 0 -70px 0 0;
display: block;
}
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS1rKfw1yo_wypTzC7Ux9liYUML0hfzkbgV9OVCrPTJlkn0a2dfB-g2NTpGtpTadbi0AlVEiI7CfaB22-tKgNXn4clBu-WrFh5eTVicXpER04qW8IUBU43YECgz7CGaz8C2hWRHFt3m7I/s1600/prevrt.png') no-repeat;
float: left;
margin: 0 0 0 -70px;
display: block;
}
#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5) {
background: #333;
border-color: #333 !important;
}
/* Info Box */
#slider .info {
line-height: 20px;
margin: 0 0 -150%;
position: absolute;
font-style: italic;
padding: 30px 30px;
opacity: 0;
color: #000;
text-align: left;
}
#slider .info h3 {
color: #333;
margin: 0 0 5px;
font-weight: normal;
font-size: 22px;
font-style: normal;
}
/* Slider Styling */
#slides {
margin: 45px 0 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 4px #666;
padding: 1%;
background: #fff;
background: rgb(252,255,244); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(219,218,201,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(219,218,201,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#dbdac9',GradientType=0 ); /* IE6-9 */
}
/* Animation */
#slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
#slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label{
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
#slider #controls {
margin: -25% 0 0 15%;
width: 70%;
height: 50px;
}
#slider #controls label {
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
#slide1:checked ~ #slides article:nth-child(1) .info,
#slide2:checked ~ #slides article:nth-child(2) .info,
#slide3:checked ~ #slides article:nth-child(3) .info,
#slide4:checked ~ #slides article:nth-child(4) .info,
#slide5:checked ~ #slides article:nth-child(5) .info {
opacity: 1;
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;
}
#slider .info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
/* Responsive Styling */
@media only screen and (max-width: 850px) and (min-width: 450px) {
#slider #slides {
padding: 1% 0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#slider #active {
margin: 22% 0 0;
}
}
@media only screen and (max-width: 450px) {
#slider #controls {
margin: -28% 0 0 24%;
width: 50%;
height: 50px;
}
#slider #active {
margin: 23% 0 0;
}
#slider #slides {
padding: 1% 0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#slider #slides .info {
opacity: 0 !important;
}
#slider #controls label {
-moz-transform: scale(0.6);
-webkit-transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
}
}

Otra opción sería alojarlo en un servicio externo y luego hacer una llamada desde la plantilla mediante una de estas fórmulas:

Enlace a alojamiento externo desde plantilla. Insertar antes de <b:skin><![CDATA[/*:

<link rel='stylesheet' type='text/css' href='FICHERO_ESTILO.CSS'/>

Enlace a alojamiento externo desde un post (o desde plantilla, antes de </head>:

<style type="text/css">
@import url(FICHERO_ESTILO.CSS);
</style>

---

Una vez que tenemos nuestro CSS ya sólo resta construir el visor en sí mismo mediante HTML. Esta sería la estructura. Los DIV INFO y su contenido son opciones:

<div id="slider">
<input checked type="radio" name="slider" id="slide1" />
<input type="radio" name="slider" id="slide2" />
<input type="radio" name="slider" id="slide3" />
<input type="radio" name="slider" id="slide4" />
<input type="radio" name="slider" id="slide5" />
<div id="slides">
<div id="overflow">
<div class="inner">
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label><label for="slide2"></label><label for="slide3"></label><label for="slide4"></label><label for="slide5"></label></div>
<div id="active">
<label for="slide1"></label><label for="slide2"></label><label for="slide3"></label><label for="slide4"></label><label for="slide5"></label></div>
</div>

Nachzeher se molestó en desarrollar el CSS necesario para un slider con 6 imágenes y nos lo pasó. Lo tenéis en el siguiente enlace.

Recordar que además de ese estilo al código HTML (el del final del post) hay que añadirle el sexto elementos en todos sus apartados: en los primeros input, en los article y en los label, tanto en controls como en active

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter