Probando
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 estas 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 ejemplo es para cinco imágenes) el 100% del ancho del contenedor y así es como se logra ir viendo las distintas imágenes. Una transición hace que simule el efecto slider y como comentan en la página, todo lo demás es estilo.
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><
#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%; }
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 del SKIN (}]]></b:skin>), en la parte de estilo. También podéis descargarlo desde este enlace o desde este otro.
#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('http://img140.imageshack.us/img140/7481/nextfy.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('http://img7.imageshack.us/img7/152/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);
}
}
<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" style="border: 0; max-width: 100% !important;" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" style="border: 0; max-width: 100% !important;" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" style="border: 0; max-width: 100% !important;" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" style="border: 0; max-width: 100% !important;" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" style="border: 0; max-width: 100% !important;" />
</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>
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
Que loco...
ResponderEliminar