Slider sencillo, automático, manual y RWD

Seguimos avanzando y añadiéndole funcionalidades a ese simple y corto JavaSript bajo jQuery que vimos hace un tiempo para construir un slider automático muy sencillo.

Primero vimos cómo incluir manualmente imágenes fijas con o sin enlace y posteriormente, la manera de leer un feed para cargar desde él automáticamente las imágenes y enlaces de las entradas recientes.

Más adelante la cosa consistió en hacer lo mismo pero de manera que los posts no fueran los últimos, sino unos cuantos cargados de manera aleatoria. Por cierto que esto último parece que en determinados casos concretos no funciona. Depende del feed que se use pero todavía no sé cual es el factor que provoca el fallo.


Pero bueno, hoy lo que toca es ver cómo ajustar el CSS para que el slider sea adaptable (RWD) y por otra parte, cómo tendría que ser el JavaScript para que sobre las imágenes aparezcan unas flechitas que nos permitan avanzar o retroceder adicionalmente de forma manual.

Y ya que estaba modificando el JS, he aprovechado para depurarlo un poco y que pudiéramos eliminar del HTML las cajas (div) innecesarias.

Debido a que ya son muchas las modificaciones hechas sobre el original, en esta ocasión partiremos otra vez de cero y lo que viene a continuación incluye todo el código necesario. Sólo tendréis que copiar y pegar en un gadget (tipo HTML/JavaScript) y luego ya ajustáis el CSS con los colores que creáis conveniente.

El que podéis desplegar en el siguiente botón es el código en cuestión y también lo podéis encontrar en este Codepen, desde dónde podréis hacer pruebas antes de pasarlo a vuestro sitio:

Ver código

<div id="slider-wrapper">
<div id="slider">
<a href="URL_ENLACE1"><img src="URL_IMAGEN1" /><p>TEXTO1</p></a>
<a href="URL_ENLACE2"><img src="URL_IMAGEN2" /><p>TEXTO2</p></a>
<a href="URL_ENLACE3"><img src="URL_IMAGEN3" /><p>TEXTO3</p></a>
</div>
<a href="javascript:void();" class="mas">&rsaquo;</a>
<a href="javascript:void();" class="menos">&lsaquo;</a></div>

<script>
$(function(){
$('#slider a:gt(0)').hide();
var interval = setInterval(changeDiv, 6000);
function changeDiv(){
$('#slider a:first-child').fadeOut(1000).next('a').fadeIn(1000).end().appendTo('#slider');
};
$('.mas').click(function(){
changeDiv();
clearInterval(interval);
interval = setInterval(changeDiv, 6000);
});
$('.menos').click(function(){
$('#slider a:first-child').fadeOut(1000);
$('#slider a:last-child').fadeIn(1000).prependTo('#slider');
clearInterval(interval);
interval = setInterval(changeDiv, 6000);
});
});
</script>

<style>
/* Contenedor general */
#slider-wrapper {
position: relative;
width: 800px;
max-width: 100%;
margin: 0 auto;
padding: 0 10px;
font-family: arial, sans-serif;
font-size: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Contenedor slider */
#slider {
position: relative;
width: 100%;
padding-bottom: 50%; /* Aspect ratio */
overflow: hidden;
border:10px solid #333;
border-radius: 5%/10%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#slider > a {
position:absolute;
top:0;
left:0;
width: 100%;
min-height: 100%;
}
/* Ajuste de las imágenes */
#slider img {
width: 100%;
min-height: 100%;
position: absolute;
margin:0;
padding:0;
border:0;
}
/* Texto que acompaña a cada imagen */
#slider p {
position: absolute;
bottom: 5%;
left: 0;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 80%;
height: 18px;
margin:0;
padding: 5px 0;
border-radius: 0 20px 20px 0;
color: #eee;
background: #333;
font-size: 18px;
line-height: 18px;
text-align:center;
}
/* Flechas de navegación */
a.mas, a.menos {
position: absolute;
top: 50%;
left: 10px;
z-index: 10;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 30px;
color: white;
background: #333;
text-decoration: none;
}
a.mas {
left: 100%;
margin-left: -40px;
}
</style>

Sólo tenéis que cambiar URL_ENLACEx, URL_IMAGENx y TEXTOx enla parte HTML por vuestros propios datos y listo. Si se quieren poner diapositivas adiciones sólo hay que añadir nuevos enlaces con la misma estructura: a + img + p


Y para los curiosos, en la parte del script podréis comprobar que lo único que hicimos con respecto al anterior código fue separar la parte que ejecuta la función repetidamente según el intervalo de tiempo definido (6000 milisegundos) y la parte que va cambiando de orden los enlaces en el HTML. Esta última la ponemos ahora como función (changeDiv) para poder reutilizarla después.

Además se han añadido dos eventos onclick para cuando se pulsan los enlaces con las clases mas y menos, de manera que con ellos se cambian de orden también los enlaces y se resetea el tiempo del intervalo para que no se solape la función automática con la manual. Por último, el clic en el menos realiza un reordenamiento inverso para poder ir a la diapositiva anterior en lugar de a la siguiente usando prependTo.


Recuerdar en este punto que para que funcione necesitáis jQuery en vuestra plantilla. Con esa librería todo lo anterior generaría un cacharrito como este. Probad las flechas para comprobar cómo se puede retroceder y avanzar manualmente y redimensionar la ventana para ver cómo el slider se adapta al ancho disponible.

No sabe hablar, pero se fija mucho

Alice in Wonderland

Rino & Rino Jr.

›‹

¿Y de dónde salió hacer esto? Pues de Masato, un lector que mediante comentarios nos empujó a terminar un código que él empezó para conseguir esto mismo. Gracias ;)

Actualización

Una idea que nos plantean en los comentarios y que puede ser resultona. Se trata de que las flechas sólo aparezcan cuando se pasa el puntero por encima del slider. Lo podéis ver funcionando en el Codepen que hice.

Para ello hay que modificar sólo parte del CSS.

En primer lugar añadimos un overflow:hidden; al selector #slide-wrapper y luego los de los enlaces tendrían que quedar así:

/* Flechas de navegación */
a.mas, a.menos {
position: absolute;
top: 50%;
left: 0px;
z-index: 10;
width: 20px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 30px;
color: white;
background: #333;
text-decoration: none;
transition: .5s margin ease;
}
a.mas {
left: 100%;
margin-left: 100px;
}
#slider-wrapper:hover a.mas {
margin-left: -40px;
}
a.menos {
left: 0;
margin-left: -100px;
}
#slider-wrapper:hover a.menos {
margin-left: 10px;
}

¿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