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.
#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
byBartolo Manzano
Pez
byArmando Bronca
Estilo libre
byDando T. Estopa
Vista de Río
byJohnny Melavo
En el arco
byElba 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éisdescargarlo desde este enlace o desdeeste otro.
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/AVvXsEg7EnxZAJoo3ynGLsQzirGRwR6KuKunkrLwEBQtSVQ1f8ihFmdEy2l6L3Xa_f1XEp5fNo3Th_8_k-KLdraIyS8vwNJS1Y-9vblSYsy4mKpgs06rRR8YKV_zqHUjOJDFm0r5YjSUKmxLjSE/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/AVvXsEhnltt3aOTyRy89MZEFrvkstR6Sh4uJ2Ph3XOc8fPdPONt_KruqqJZhP3HNojBOPtuFx8OT7CDdOooGRk423TqxnIV4b-o3s0dKrwM2X2N2Y6ez7tZEIv52NvJz2yKzuvrnfNYfN1b-IQc/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 deb:skin
