Posiblemente el slider jQuery más sencillo

¿Tenéis jQuery en vuestro blog y espacio para insertar 10 líneas de código? Sí la respuesta es afirmativa y además queréis tener un carrusel de imágenes automático, este es el código más simple que he visto hasta la fecha y seguro que no hay otro que lo sea mucho más. Si acaso con algún que otro carácter menos, pero pocos, pocos menos.

Ese código que después veremos y una sucesión de imágenes simples metidas dentro de una caja, con un contenedor general común, nos daría este resultado:

1. Instalación JavaScript necesario

Por empezar desde cero, si no tenemos jQuery primero añadimos esta línea justo después de }]]></b:skin> para cargar esta conocida librería:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>

Una vez seguros de que tenemos la librería en nuestra plantilla, a continuación de esa misma línea añadimos lo que hace que la serie de imágenes funcionen como slider:

<script type="text/javascript">//<![CDATA[
$(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
         .next('div').fadeIn(1000)
         .end().appendTo('#slider');}, 4000);
});
//]]></script>

Podemos guardar los cambios en la plantilla porque eso es todo. Es simple pero veréis que funciona y hace lo que tiene que hacer. Ahora ya sólo tenemos que poner las imágenes dónde queremos que aparezcan, de la manera que veremos a continuación.

2. Crear el slider

Con esto anterior en nuestra plantilla (aunque nada impide ponerlo directamente en un gadget, en una página o incluso en una entrada como veis aquí) ya podremos crear un visor como el que habéis visto arriba. Sólo tenemos que usar esta estructura HTML para añadir las imágenes:

<div id="slider">
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN1"/></div>
</div>

No sé cómo lo veis pero ya está todo lo necesario.

Para mí esto es bastante ligero y eficiente, mucho más que la mayoría de librerías que se usan quizás demasiado habitualmente.

Ajustes

Los tres últimos números del plugin permiten ajustar algunas cosillas. Todos van expresados en milisegundos (4000 = 4 segundos)

• fadeOut(0): Tiempo en desaparecer la imagen saliente
• fadeIn(1000): Tiempo en aparecer la imagen entrante
• ('#slider');},4000): Tiempo de permanencia de cada imagen

Cómo funciona

Y para los curiosos que quieren aprender cosas...

$('#slider div:gt(0)').hide();
Con gt(x) seleccionamos todos los div a partir del número x. En este caso 0 es el primero, así que lo que hacemos con esta línea es esconder (hide) todas las cajas excepto la primera, que será la imagen inicialmente visible.

setInterval(function(){ [lo que haremos] }, 4000);
Necesitamos reiterar una serie de cosas cada cierto tiempo y eso lo hacemos con setInterval, indicando el tiempo de retardo entre cada serie.

$('#slider div:first-child').fadeOut(0)
Dentro de cada uno de esos intervalos hacemos desaparecer (fadeOut) la primera caja (div:first-child) que haya en la relación de imágenes...

.next('div').fadeIn(1000)
... y hacemos que la siguiente caja (next) aparezca poco a poco (fadeIn).

.end().appendTo('#slider');
Por último tomamos la que hasta ese momento es la primera imagen y la situamos al final (appendTo) de la "lista".

end() resetea el contador de elementos que hicimos avanzar con next(). De esa manera, el primer hijo que antes hicimos desaparecer es el que enviamos al final de la pila y no la imagen que ahora tenemos visible. Para el siguiente ciclo la que hasta este momento era visible (que era la segunda) será la primera y por tanto la que haremos desaparecer.

Referencias sobre las funciones usadas:

• :gt()
• .hide()
• setInterval()
• :first-child
• .fadeOut()
• .fadeIn()
• .end()
• .appendTo()

Variantes y personalización

Como habéis visto no es necesario CSS para que el slider funcione, pero si lo usamos podremos cambiar su aspecto, permitir el uso de imágenes de diferente tamaño, incluir rótulos e incluso mejorar la transición. A continuación algunas ideas.

Cuestión de centímetros

Buscando a Nemo

No sabe hablar, pero se fija mucho

Limitar el tamaño del contenedor general y evitar el desbordamiento para que las imágenes más grandes no ocupen más espacio. Y ya que estamos le ponemos unas esquinas redondeadas, un borde y lo centramos. El position:relative nos vendrá bien para otra cosa que haremos después.

#slider {
position: relative;
overflow: hidden;
width: 500px;
height: 300px;
border:10px solid #333;
border-radius: 40px;
margin: 0 auto;
padding: 0;
}

Si situamos las cajas padre de las imágenes de manera absoluta con respecto al contenedor general (para eso pusimos antes el relative), estas se dispondrán solapadas una encima de otra. De esta manera al fadeOut le podremos dar un tiempo para que sea "visible" (hemos cambiado el 0 por un 1000) y la transición entre imágenes más suave. Es esa mezcla de imágenes que se produce en la segunda demo.

En las imágenes, el max-width nos sirve para que siempre ocupen todo el ancho y el min-height para que aunque sean deformadas, no se nos quede hueco por debajo cuando sean de menos de 300px de alto.

#slider > div {
position:absolute;
top:0;
left:0;
}
#slider img {
width:100%;
min-height:300px;
margin:0;
padding:0;
border:0;
}

Y ya si queremos añadir otros elementos sobre las imágenes (en este ejemplo un texto), sólo tendremos que etiquetarlos con un span o como párrafo (p) y en el CSS posicionarlos de manera absoluta, ubicándolos en el lugar exacto dónde queramos con top/bottom - left/right.

#slider p {
position: absolute;
bottom: 30px;
left: 0;
display: block;
width: 400px;
height: 24px;
margin:0;
padding: 5px 0;
color: #eee;
background: #990000;
font-size: 22px;
line-height:22px;
text-align:center;
}

El marcado en el HTML para esto último, incluyendo además un enlace sobre la imagen, sería tal que así:

<div id="slider">
<div><a href="URL_ENLACE1"><img src="URL_IMAGEN1" /></a><p>TEXTO1</p></div>
<div><a href="URL_ENLACE2"><img src="URL_IMAGEN2" /></a><p>TEXTO2</p></div>
<div><a href="URL_ENLACE3"><img src="URL_IMAGEN3" /></a><p>TEXTO3</p></div>
</div>

¿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