Ests en: Home JavaScript Posiblemente el slider jQuery ms sencillo

OLOBLOGGER
POSIBLEMENTE EL SLIDER JQUERY MS SENCILLO
Tenis jQuery en vuestro blog y espacio para insertar 10 lneas de
cdigo? S la respuesta es afirmativa y adems queris tener un
carrusel de imgenes automtico, este es el cdigo ms simple que
he visto hasta la fecha y seguro que no hay otro que lo sea mucho
ms. Si acaso con algn que otro carcter menos, pero pocos, pocos
menos.
Ese cdigo que despus veremos y una sucesin de imgenes simples
metidas dentro de una caja, con un contenedor general comn, nos
dara este resultado:
1. Instalacin JavaScript necesario
Por empezar desde cero, si no tenemos jQuery primero aadimos
esta lnea justo despus de }]]></b:skin> para cargar esta conocida
17 de abril de 2013
librera:
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.8
/jquery.min.js' type='text/javascript'/>
Una vez seguros de que tenemos la librera en nuestra plantilla, a
continuacin de esa misma lnea aadimos lo que hace que la serie de
imgenes funcionen como slider:
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
<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 veris que funciona y hace lo que tiene que hacer. Ahora
ya slo tenemos que poner las imgenes dnde queremos que
aparezcan, de la manera que veremos a continuacin.
2. Crear el slider
Con esto anterior en nuestra plantilla (aunque nada impide ponerlo
directamente en un gadget, en una pgina o incluso en una entrada
como veis aqu) ya podremos crear un visor como el que habis visto
arriba. Slo tenemos que usar esta estructura HTML para aadir las
imgenes:
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
<div id="slider">
<div><img src="URL_IMAGEN1"/></div>
<div><img src="URL_IMAGEN1"/></div>
<div><img src="URL_IMAGEN1"/></div>
</div>
No s cmo lo veis pero ya est todo lo necesario.
Para m esto es bastante ligero y eficiente, mucho ms que la mayora
de libreras que se usan quizs demasiado habitualmente.
Ajustes
Los tres ltimos nmeros 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
Cmo funciona
Y para los curiosos que quieren aprender cosas...
$('#slider div:gt(0)').hide();
Con gt(x) seleccionamos todos los div a partir del nmero x. En este
caso 0 es el primero, as que lo que hacemos con esta lnea 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 relacin de imgenes...
.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 personalizacin
Como habis visto no es necesario CSS para que el slider funcione,
pero si lo usamos podremos cambiar su aspecto, permitir el uso de
imgenes de diferente tamao, incluir rtulos e incluso mejorar la
transicin. A continuacin algunas ideas.
Limitar el tamao del contenedor general y evitar el desbordamiento
para que las imgenes ms grandes no ocupen ms 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 despus.
Cuestin de centmetros No sabe hablar, pero se fija mucho
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
#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 imgenes de manera absoluta con
respecto al contenedor general (para eso pusimos antes el relative),
estas se dispondrn 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 transicin entre imgenes ms suave.
Es esa mezcla de imgenes que se produce en la segunda demo.
En las imgenes, 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.
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
#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 aadir otros elementos sobre las imgenes (en este
ejemplo un texto), slo tendremos que etiquetarlos con un span o
como prrafo (p) y en el CSS posicionarlos de manera absoluta,
ubicndolos en el lugar exacto dnde queramos con top/bottom -
left/right.
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
#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 adems un enlace
sobre la imagen, sera tal que as:
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO
<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 quizs
prefieres ser ms metdico y suscribirte a nuestras entradas por
correo ? Tambin puedes imprimir este artculo .