Posiblemente el slider jQuery más sencillo | Oloblogger ¿Tenéis jQuery en vuestro blog y espacio para insertar 10 líneas de código? Sí la respuesta es afirm...

17 de abril de 2013

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:


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
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

223 comentarios :

  1. Muchas gracias. Precisamente estoy buscando un slider de imágenes sencillito para mi blog, y esto me puede venir muy bien. Pero, una pregunta... ¿y si quiero que enlacen con una entrada? Es decir, que no sean una mera presentación de imágenes sino una manera de acceder, por ejemplo, a entradas destacadas.

    Saludos!

    ResponderEliminar
    Respuestas
    1. Discúlpame... acabo de ver que lo referente a los enlaces lo indicas justo al final.

      Entonces, si yo quiere encajar un slider de este tipo en mi barra lateral, por ejemplo, ¿puedo hacer todo el proceso utilizándolo como un gadget con la función html/javascript de blogger, o tengo que tocar algo en la plantilla?

      Gracias.

      Eliminar
    2. Puedes ponerlo sin problemas en un gadget, copiando todo seguido el JavaScript y el HTML que forma el visor. No olvides que has de tener jQuery y en ese caso, mejor que sea en la plantilla para que te valga para otras cosas.

      Eliminar
  2. Es estupendo, pero quiero poner el personalizado redondeado y con el texto y no se parece en nada al tuyo
    Puedes indicarme donde debo colocar el código? y que hice mal?
    Gracias

    ResponderEliminar
    Respuestas
    1. Para que tenga el aspecto del segundo demo, en primer lugar tienes que añadir los tres segmentos de CSS que se dan, en cualquier parte entre las etiquetas SKIN de tu plantilla. Echa un vistazo a esta entrada para saber con más detalle dónde se ubica el CSS en Blogger.

      Luego, para construir el slider con mensajes de texto tienes que usar la última estructura HTML en lugar de la primera.

      Eliminar
  3. Esas descripciones en las fotos, xD xD lol

    ResponderEliminar
    Respuestas
    1. Casi siempre pongo ejemplos, pero lo que más me cuesta es poner un buen contenido :p

      Eliminar
  4. Gracias Oloman.

    Sólo una cosa. Me funciona todo pero no me aparece el texto.

    Además de eso observo que si trabajo en html y paso a "redactar" veo las imágenes del slider seguidas (quizá sea normal), pero cuando vuelvo a HTML veo que la línea se ha corregido y cambia de:
    (p)TEXTO1(/p)
    a
    (/br)TEXTO1

    lo de que no me aparezca el texto no se si es de eso porque hago vista previa desde html sin cambiar a redactar y no me sale tampoco (y aunque actualice desde html tampoco).

    no se que puede pasar. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Héctor.

      Desde Redactar pasan cosas raras siempre. En primer lugar ahí no siempre se interpreta bien el código que pones en una entrada, viéndose en ocasiones distinto de como quedará finalmente en el post.

      Y luego está lo que comentas con los párrafos y es que cuando haces una Vista Previa desde Redactar, hay ciertas cosas en los códigos que no le gustan a Blogger y que te elimina.

      Lo mejor para mí es escribir todo desde la pestaña HTML y si hay que comprobar cómo queda todo, desde ahí mismo hacer la Vista Previa. De esa manera no te cambia nada.

      Otra cosa es lo de los BR. En el menú de opciones de la derecha (en el editor de entradas) yo tengo seleccionado "Pulsar Intro para los saltos" y has de saber que cuando redactas código en una entrada, si no lo redactas todo seguido, sin saltos de línea, esos saltos te los mete como parte del código. Por tanto hay que evitarlos.

      Eliminar
  5. de todas formas sigo sin poder ver el texto, no sé si a alguien más le pasa.

    ResponderEliminar
    Respuestas
    1. Si me pasas el enlace de dónde lo tienes quizás pueda descubrir algún fallo. Igual que funciona aquí debería funcionar bien en tu sitio.

      Eliminar
    2. Hola Oloman, a mi el texto me aparece detrás de la imagen... y no se superpone a la imagen como debería..... (me di cuenta cuando refresque el sitio donde lo veo por un seg)

      Eliminar
  6. Muchísimas gracias, todo muy bien explicado me funciona perfectamente!!!

    ResponderEliminar
  7. Gracias oloman. Lo que estaba buscando; una explicación detallada, para comenzar a diseñar mi propio slider. Pero seguro va para mi blog ya que utiliza menos código jeje... Saludos

    ResponderEliminar
  8. No me funciona, no tengo idea de que estoy haciendo mal, metí todo el código en una página html para probarlo aparte y se me va hasta la ultima imagen y se queda congelado. Por otra parte no se donde alojar archivos e imágenes en blogger, agradecería mucho tu ayuda.

    ResponderEliminar
    Respuestas
    1. Hola, si lo pones en una página todo, no olvides quitar todos los saltos de línea. De lo contrario no funcionará bien. No te puedo decir más sin ver cómo quedó tu slider.

      Eliminar
  9. Donde insertas este pedazo de codigo?

    }]]>

    No encuentro :S

    ResponderEliminar
    Respuestas
    1. No sé a qué trozo te refieres, pero si es al segundo que se muestra en esta entrada, en ella se indica. Después del cierre del SKIN, editando la plantilla.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
  10. Hola,te hago unas consultas, puedo cambiar el intervalo de tiempo para cierta tanda de fotos?es decir,muestra 20 fotos y quiero que las primeras 10 pasen mas rapido que las otras, si es asi como se hace?muchas gracias!.
    2) Se le puede agregar flechitas y algun play? como para que si quieren elegir las fotos las eligan?,pregunto esto porque lo necesito para las entradas,no para la cabecera,y todo lo que encuentro bueno es para la cabecera, muchas gracias!

    ResponderEliminar
    Respuestas
    1. Seguro que se pueden hacer las dos cosas Eze, pero habría que complicar bastante este sistema que lo único que pretende es ser una forma fácil de montar un visor de imágenes automático. Y todo hay que decirlo, mis conocimientos de jQuery son muy limitados.

      Lo segundo (pase manual) sí que empecé a verlo, pero lo tengo a medias y no resulta tan sencillo como pretendía. No dudes de que en cuanto lo tenga, lo publicaré, pero no creo que incluya nada para hacer bloques de imágenes con distintos tiempos como necesitas.

      Eliminar
  11. Muchas gracias por este aporte, lo he usado y me ha funcionado perfectamente. Sobretodo me ha servido para saber que se puede trabajar con jquery en blogger, interesante!
    Sencillo y efectivo.

    Saludos!!

    ResponderEliminar
    Respuestas
    1. Esa era la idea, sencillez funcional.

      Y lo de jQuery es normal. A fin de cuentas es JavaScript.

      Eliminar
  12. El post es genial, pero te pregunto ¿se vera en todas las paginas de mi blog? y si solo quiero que se vea en el home?.

    Saludos

    ResponderEliminar
    Respuestas
    1. Si no pones una condición, el slider se verá en todo tipo de páginas. Si quieres filtrar unas u otras, echa un vistazo a esta guía.

      Eliminar
  13. Esto es lo que se busca. Sencillo y directo. Muchisimas gracias.

    ResponderEliminar
  14. Gracias me encanta tu blog!!!

    ResponderEliminar
  15. Enhorabuen!! En serio, aunque lo sabrás, pero es el blog donde más estoy aprendiendo, trucos, sintaxis, selectores...de todo. Muchisimas gracias por tu aporte!! :)

    ResponderEliminar
    Respuestas
    1. Pues no, no lo sé... así que viene bien que te avisen de vez en cuando de que consigues transmitir lo que intentas. Gracias ;)

      Eliminar
  16. Hola amigo mucho gusto un saludo, se que no manejas mucho jquery al igual que yo y muchos otros, pero ya que pusiste a trabajar este slider como se haria para un par de botones siguiente y previo. Saludos y muy buen Trabajo.

    William Flores

    ResponderEliminar
    Respuestas
    1. Lo tengo medio visto Wgeovah. Un día de estos, con tiempo, lo pruebo y lo publico.

      Eliminar
  17. Hola oloman
    La verdad este blogger me ha ayudado muchisimo
    Pero me pare aca.. no corren las imagenes. No se cual puede ser el problema
    www.conexioncentro.com.ar/index4.php

    Si me podes dar una manito te lo agradeceria... Saludos

    ResponderEliminar
    Respuestas
    1. listo funciono espectacular!! sos un capo oloman!!!

      Eliminar
    2. OK. Mano astral echada ;)

      Eliminar
  18. Gracias por el aporte, pero tengo una duda, en qué parte del código debería pegar esto:

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


    Gracias!

    ResponderEliminar
    Respuestas
    1. Eso es CSS, sólo para dar estilo. Has de ponerlo entre las etiquetas SKIN de tu plantilla, al igual que el que empieza por #slider {...

      Eliminar
  19. Oloman gracias!! sólo no me sale el fade out:S hice todo tal como indicas, paso a paso pero en vez de fade la imagen solo desaparece de golpe, alguna idea? gracias

    ResponderEliminar
    Respuestas
    1. ¿Seguro que has cambiado el valor cero de fadeOut(0) por un 1000 (por ejemplo)?

      Eliminar
    2. Pues me ocurre lo mismo que a Mike. El fadeOut no funciona, ponga 1000, 2000, o la cantidad que sea. Pero el resto muy bien, lo he implementado en mi blog.
      Si logras averiguar el motivo, contéstame. He puesto avisarme en el comentario.
      Salud(os)

      Eliminar
    3. En "variantes y personalización" tienes una posible explicación. Fíjate que el primer slider de esta entrada pega como saltos entre imágenes y eso es porque lleva el código básico. Con CSS puedes hacer que la transición sea más suave según se explica

      Eliminar
    4. Muchísimas gracias, al final lo he conseguido añadiendo css, como bien indicas.
      Un abrazo.

      Eliminar
  20. Hola, como podría hacer para que la imágen en vez de hacer fade se mueva a la izquierda. Osea que las imagenes se muevan todas a la izquierda despues de un tiempo.

    Graciasde antemano.

    ResponderEliminar
    Respuestas
    1. Eso ya no es el "slider más sencillo". Sería otro y habría que construirlo entero... o buscar en algún sitio que ya tengan hecho uno así ;)

      Eliminar
    2. Hola Oloman, y es muy muy complicado hacer uno que se mueva a la izquierda? Podrías indicarme en donde encontrar un código para este tipo de slider. De antemano, muchas gracias!!!

      Eliminar
  21. Oloman como estas... Solo para ver si me podrias ayudar ya que quiero que mi slider sea infinito... muchas gracias. gran aporte.

    ResponderEliminar
    Respuestas
    1. ¿Y qué es eso de un "slider infinito"?

      Eliminar
  22. Hola Oloman, esta es la primera vez que me paso por tu blog y me gustaria saber si este slider se puede poner mas de una vez en la misma entrada, gracias de antemano y me estaré pasando por tu blog mas seguido

    ResponderEliminar
    Respuestas
    1. Al usar una ID (#slider) no se podría usar más de una vez por página y por tanto, no podría haber dos en una misma entrada tal y como se dio el código aquí.

      Para hacerlo tendrías que generar un segundo DIV con por ejemplo #slider2 y duplicar el código JavaScript sustituyendo #slider por #slider2. Entonces sí.

      Eliminar
  23. Hola Oloman

    Tengo el mismo problema que Jorge Aquino, se congela en la última imagen y ya no corre.

    Agradezco que me puedas ayudar!!!
    Puedes ver mi problema en esta web: http://www.dt-mayorista.com/secciones-empresa-turismo/destinos-y-guias.html

    ResponderEliminar
    Respuestas
    1. Veo tu problema, pero no usaste este código, sino al parecer otro slider (flexslider). Yo no puedo conocerlos todos...

      Eliminar
  24. Es posible mostrar imágenes según la etiqueta buscada?

    ResponderEliminar
    Respuestas
    1. Más o menos. Mira esta otra entrada. En el último trozo de código que se incluye allí, dónde está la dirección del feed del blog habría que cambiar esa dirección por una de una etiqueta concreta y entonces sólo mostraría las entradas (con su imagen) de esa etiqueta.

      Lo que pasa es que para que funcione para cada etiqueta buscada habría que repetir ese código varias veces, cada uno con una etiqueta distinta y meter la llamada a cada feed dentro de una condición según dicha etiqueta.

      Eliminar
  25. No me anda, estoy armando mi propio sitio web desde cero y he colocado la librería JQUERY dentro de head y el id del slider en CSS. Luegos los divs lo puse en el body tal cual indica y no funcionó. ¿Cómo hay que hacer para instalarlo en un sitio aparte creado desde cero?

    ResponderEliminar
    Respuestas
    1. De la misma manera. El código que hay en el apartado 1 va después del cierre de la etiqueta SKIN y antes del cierre /HEAD. El del apartado 2 iría por ejemplo en un gadget tipo HTML/Javascript, seguramente encima del cuerpo de entradas o bajo la cabecera. Por último, el CSS que explico después tendrías que colocarlo entre las etiquetas SKIN. Esa es la ubicación correcta de cada trozo.

      Eliminar
  26. Amigo y para que tengo redireccionaminedo al darle clic a la imagen como se hace

    ResponderEliminar
    Respuestas
    1. Para que cada imagen tenga un enlace hay que cambiar el HTML que explico en 2 y en su lugar usar el que se ve justo al final del post.

      Eliminar
  27. muchas gracias por tu espacio, de antemano gracias.

    tienes algún demo donde poder mirar. ó ejemplo completo

    es que he copiado el codigo y no me funciona

    ResponderEliminar
    Respuestas
    1. Tienes dos demos en esta misma entrada... O_O

      Eliminar

  28. diculpe la ignorancio pero en el [CDATA[ es aca donde se ubican las direcciones de las imagenes?

    ResponderEliminar
    Respuestas
    1. No. La parte HTML, que es la de las imágenes (la del apartado "Crear el slider"), tienes que ponerla en la parte HTML de la plantilla. Es la que aparece entre <body> y su correspondiente cierre, aunque también puede ser insertado como gadget (HTML a fin de cuentas) desde el apartado Diseño del Escritorio.

      Prueba primero como gadget, que es lo más fácil, y si te funciona ya puedes probar dentro de la plantilla. Y me refiero sólo a esa parte, la otra (el JavaScript) ya indico exactamente dónde insertarlo.

      Eliminar
  29. Como puedo añadir la libreria de jquery en html?
    No me funciona

    ResponderEliminar
    Respuestas
    1. Hola Gema. En el artículo doy una referencia exacta sobre dónde hay que insertar los dos primeros trozos de código y el primero es la librería sobre la que preguntas.

      Sobre el resto, sólo tienes que leer el comentario anterior (30.1)

      Eliminar
  30. hola gema el primer trozo de codigo de este ejemplo lo puedes incluir en el encabezado o head asi incluyes la libreria jquery, pero a mi tampoco me funciona.

    ResponderEliminar
  31. Hola. Esta perfecto para lo que yo quiero. Necesito meter el código en una pagina php limpia pero no me funciona de ninguna manera. ¿Podrias, por favor, copiar y pegar el código completo para que funcione? Llevo días intentándolo y estoy ya desesperado? Muchas Gracias.

    ResponderEliminar
  32. Hola de nuevo. Ya lo tengo solucionado. Sólo había que cerrar el script de la librería y volverlo a cerrar al final del segundo bloque. Gracias y enhorabuena por el blog. Es muy bueno

    ResponderEliminar
    Respuestas
    1. Es que según las plataformas y el sitio exacto dónde se inserte el código, eso de cerrar la etiqueta SCRIPT dentro y no con un </script>, a veces no funciona.

      Y gracias ;)

      Eliminar
  33. Como puedo detener el slider en la última imagen?

    ResponderEliminar
    Respuestas
    1. Con este código no podrás hacer eso pues está montado específicamente para que sea un bucle sin fin, en el que la última imagen vista pasa al final de la cola para cuando llegue de nuevo su turno.

      Eliminar
  34. Hola M! Lo he puesto y ha quedado muy lindo, se ve perfecto en chrome y safari pero en ie y en mozilla, aunque anda muy bien, me sale super descuadrado del sitio inicial donde lo puse. Que puedo hacer? Abrazos mi amigo al otro lado del oceano.

    ResponderEliminar
    Respuestas
    1. Ranita, no lo veo en tu tienda de ropa...

      Eliminar
  35. Muchas gracias por este tutorial. Me estaba volviendo loca con los slide y la verdad es que este es perfecto. Sólo una cosa, no consigo que se vea el texto.

    El código de estilos lo he pegado en Diseño>avanzado>css. Y el html en un gadget de html (en la cabecera) y todo se ve bien (incluso los enlaces de las imágenes) excepto el texto que no aparece.

    Muchas gracias por todo y disculpa la molestia.

    ResponderEliminar
    Respuestas
    1. No sé por qué ocurre eso, pero creo que lo solucionarás si el párrafo con el texto lo pones justo antes del enlace y no después. Adicionalmente tendrás que ajustar el valor del BOTTOM para el párrafo (#slider p) y así reubicarlo dónde quieras.

      Eliminar
    2. hola oloman ,,,
      yo cambie la propiedad bottom por TOP ,,,
      a lo primero pense q era un problema de z-index,,, pero despues me di cuenta q se salia del cuadrante nada mas ,,, por eso uso top,,,

      Eliminar
    3. x sierto ,, muchas gracias por tu exelente explicacion ,,,
      me sirvio mucho para entender mas jquery

      Eliminar
    4. Bueno, para eso está CSS, para ajustar las cosas según las necesidades de cada uno y con la ventaja de que a veces hay más de una solución para el mismo problema.
      Y gracias a tí por apuntar ese dato y sobre todo por hacerme saber que esto te fue útil :)

      Eliminar
  36. He puesto el codigo y bien, luego no se porque me salio una flecha como esta "-->" en todas las paginas del blog arriba a la izquierda, tratando de quitarla no que que hice que ahora el slider se me ve arriba a la izquierda sin estilo y el otro porque puse un segundo perfecto no lo entiendo quito pongo restauro, copio pego y sigue igual y la maldita flecha tambien "-->", lo que averigüe es que es por el codigo del estilo del slider pero no se va aunque borre y ponga de nuevo, si pudieras echar un vistazo y si das con el fallo. gracias un saludo.
    http://juliachillon.blogspot.com.es/
    Pd.: es en entrevistas gracias.

    ResponderEliminar
    Respuestas
    1. En tu plantilla veo un
      <body>
      -->

      Lo que hay tras la etiqueta BODY no debería estar ahí y es lo que te genera eso. Por cierto que no sólo te sale en la página que dices, sino en todas y eso es porque no tiene nada que ver con el slider.

      Eliminar
  37. Hola, tengo un problema y una duda y antes de intentar solucionarla me gustaría consultarte: El slider de mi blog ha desaparecido; el problema es de la plantilla y autor ha desaparecido también. Mi duda es si se puede insertar un nuevo slider, que "cuadre" dentro del espacio del otro o si ello conlleva muchos problemas, ya que hace bastante tiempo que no modifico la plantilla. Gracias y un saludo.

    ResponderEliminar
  38. Si sabes algo de CSS es fácil. Este por ejemplo valdría para cualquier tamaño y sólo tendrías que cambiar los valores del WIDTH y HEIGHT que aparecen en este código.

    ResponderEliminar
  39. Tenía alguna idea, pero hace más de un año que no toco el blog y me estoy un poco liada con los cambios. Repasaré las entradas en las hablas del CSS y probraré. Gracias por la aclaración ;)

    ResponderEliminar
  40. No podía salirme de esta página sin antes agradecer enormemente por este gran tutorial y esta enorme ayuda que fue para mi, estaba buscando algo así para una página web que estoy maquetando de veras mil y mil gracias. Saludos desde Colombia

    ResponderEliminar
  41. Mi página es http://chessarq.com/
    Dos dudas:
    1- Yo quería un bucle infinito. ¿Por qué no hace el bucle infinito que se supone que es por defecto?
    2- ¿Como se haría dos sliders en dos columnas? Pegar el codigo dos veces no funciona.

    Gracias y un saludo.

    ResponderEliminar
    Respuestas
    1. En tu caso, lo que hay justo después de la etiqueta SCRIPT (//<![CDATA[) y lo que hay justo antes de su cierre, creo que son innecesarios. En Blogger hace falta, pero en otras plataformas creo que no. Quizás eso sea lo que te está interfiriendo.

      Y para hacer dos columnas, tendras que usar dos ID distintas. Por ejemplo, crea un segundo HTML con la ID="SLIDER2" y luego replica el código javascript pero cambiando todos los SLIDER por SLIDER2.

      Eliminar
    2. 1- He eliminado eso y sigue funcionando igual. Me salía en gris así que no afectaba en nada, era como si no estuviera. Ese no es el problema.

      Antes del body tengo este script y no se si afecta para que no sea el bucle infinito pero incluso eliminandolo no varía nada. No sé donde está el error.

      script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/> /script>
      script type="text/javascript" src="http://static.tumblr.com/thpaaos/sZQkv2j7g/infinitescroll.js"> /script>
      script type="text/javascript">
      var jQis = jQuery.noConflict();
      jQis(function($){

      $('ul.allposts').infinitescroll({
      debug : false,
      nextSelector : "a.next",
      text : "",
      donetext : "{lang:No more posts}.",
      navSelector : "div#footer",
      contentSelector : "div#right",
      itemSelector : "div#right > .post"
      });
      });
      /script>

      También tengo este CSS no se si afecta:
      #slider {
      position: relative;
      overflow: hidden;
      width: 250px;
      height: 500px;
      border-radius: 10px;
      margin: 0 auto;
      padding: 0;
      }
      #slider > div {
      position:absolute;
      top:0;
      left:0;
      }
      #slider img {
      width:100%;
      min-height:300px;
      margin:0;
      padding:0;
      border:0;
      }

      Y por último, en tu primer paso, donde pones la explicación de Javascript, utilizas el codigo:
      script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>

      pero solo me funciona si seguidamente después pongo /script pero no me hace bucle infinito. Si no pongo script detrás de ahí se me queda solamente una imagen fija.

      2- He duplicado el código poniendo cambiando slider por slider2 y no me aparece y si lo situo en otro lado me aparece abajo y me gustaría que apareciese a la derecha del que tengo:

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

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

      div id="slider2">
      div> img src="http://imageshack.us/a/img854/9595/ts71.jpg"/> /div>
      div> img src="http://imageshack.us/a/img22/3840/3t27.jpg"/> /div>

      Eliminar
    3. Ya he encontrado la respuesta. Estaba dentro de varios divs anteriores. Había que sacarlo de dos divs y ponerlo en el justo en el ultimo div porque tenía otros javascripts que creaban interferencias.

      Eliminar
    4. Pues mejor que lo hayas encontrado tú, porque a mí me hubiera sido imposible encontrar eso con lo que me pasaste. Estupendo :)

      Eliminar
  42. Este script está genial. Creo que todas las páginas deberían tener uno.

    ResponderEliminar
    Respuestas
    1. Ya que me has hecho la pelota, te hago un regalo :)

      #slider a:hover {
      background: none;
      }

      Eliminar
  43. Tengo otra duda: ¿Cómo hago para que el script se me vea SÓLO EN LA PÁGINA PRINCIPAL y no en otras pestañas?

    ResponderEliminar
    Respuestas
    1. Eso ya no lo sé. En Blogger puedes condicionar lo que quieres que salga según el tipo de página, pero en Tumblr no sé si existe algo parecido

      Eliminar
    2. ¿No existe un código para que un div se muestre sólo en el index, la página principal?

      Eliminar
    3. Supongo que sí pero yo sólo conozco los que sirven para Blogger: Guía de condiciones Blogger

      Eliminar
  44. hola amigo, se que ya tiene mucho tiempo esta entrada pero buscando me encontré con algo que buscaba muy sencillo, solo una cosa, la barra de color de fondo del texto no me aparece transparente...¿como le hago?, gracias por tu ayuda. Saludos

    ResponderEliminar
    Respuestas
    1. Añádele al párrafo del slider una transparencia
      #slider p {opacity: .8;}

      Eliminar
  45. Saludos

    Espero que puedan ayudarme, mi nombre es José, tengo un blog.

    rellenadodecartuchos.com

    He puesto un método de anuncios después de leer más pero no siempre se muestra, tengo que actualizar la página para que se muestre, la verdad me ayudaría mucho a que cargue para que siempre aparezcan los anuncios, ya he hecho casi todo.

    Cuando el anuncio esta con otro dentro de la publicación no carga por nada, creo que tiene que ver con esto que explica pero no se la verdad como solucionar el problema.

    A continuaciín una imagen si entra cualquiera a la página,

    http://i42.tinypic.com/ra9eky.gif

    Luego que se actualiza la página aparecen los anuncios:

    http://i42.tinypic.com/dy53yt.jpg

    He copiado el procedimiento de este blog, por favor ayuden llevo mucho tiempo tratando de solucionarlo, se que podre aumentar la cantidad de clic si por lo menos se muestran siempre los anuncios que no sea necesario actualizar la página para verlo, nadie anda actualizando una página cuando entra a ella.

    http://www.mybloggertricks.com/2013/02/positioning-adsense-ads.html

    por favor responder si es posible a tintacomdo@gmail.com

    ResponderEliminar
    Respuestas
    1. Creo que el problema está en que no puedes mostrar más de 3 anuncios de Adsense por página. Comprueba los que se ven en cada una de cada tipo (portada, navegación, entrada individual...) porque casi seguro que es eso.

      Eliminar
  46. Hola, me ayudarías con el paso 1 ?
    Pongo ambos scripts y me da error de sintaxis, va esto }]]> en algun lado?
    Muchas Gracias!

    ResponderEliminar
    Respuestas
    1. Hola. Echa un vistazo a los comentarios 32, 33 y el hilo 34

      Eliminar
    2. Muchas Gracias por tu rápida respuesta! Me funcionó! Gracias

      Eliminar
  47. Hola Oloman, como estas? te hago una consulta, como hago para usar este script con varios rotadores a la vez en un mismo sitio? Gracias!

    ResponderEliminar
    Respuestas
    1. La única manera con este script sería duplicando todo pero cambiando todos los #slider por #slider2, por ejemplo, ya que las ID (#) tienen que ser únicas por página.

      Eliminar
  48. Me ha servido de gran ayuda, muchisimas gracias, podeis ver un ejemplo en mi pagina web (hecha con blogger) donde este slider esta en primera plana. www.layansource.tk un saludo!

    ResponderEliminar
  49. Esto funciona para un sitio normal es decir NO UN BLOG?

    ResponderEliminar
    Respuestas
    1. Debería. No hay ningún motivo para que no lo haga. Cargas la librería jQuery y el plugin y luego sólo es cuestión de añadir el HTML dónde quieras que salga el slider, sin olvidar añadir el estilo (CSS) en su caso.

      Eliminar
  50. hola!
    me funcionaba perfecto, pero necesito tener una imagen estática que seria mi logotipo y al lado el slider, para dejarlo alineado uso inline-block, pero con eso pierdo el efecto que le quiero dar ala transicion del slider ya que quiero una como la del segundo ejemplo.Display:inline-block y position:relative, no son compatibles..que pudo hacer?
    Alguna solucion para esto?

    ResponderEliminar
    Respuestas
    1. Hola Cathy. Si al selector #slider le pones un inline-block, al del logotivo (por ejemplo .logo) también y por último, al contenedor de ambos le pones un text-align:center; no deberías tener problemas.

      Eliminar
  51. He metido más de tres imágenes y cuando carga la web me salen todas una detrás de otra y a los pocos segundos comienza el slider. Es una lata. No se si me podrás ayudar. Saludos y muchas gracias.

    ResponderEliminar
    Respuestas
    1. Podría si me dieras la dirección exacta dónde tienes puesto el slider. Es la única forma en la que puedo ver qué parte del código puede estar mal.

      Intentando adivinar, podría ser porque tuvieras dos veces la libreria jquery.js con dos versiones distintas.

      Eliminar
  52. hola es la primera vez que veo un post tuyo y es muy bueno. Gracias por tu aportacion Oloman Oloman veo que ayudas a muchos. Mi pregunta es como le ago para no perder la calidad de las imagenes y colocar el slider en una cierta ubicacion de la pantalla, Gracias por tu respuesta.

    ResponderEliminar
    Respuestas
    1. Para que no pierdan calidad, las imágenes que uses deben ser al menos del mismo ancho que el slider (500px en el ejemplo) y para colocarlo dónde quieres has de incluir el código del punto 2 allí dónde quieres que aparezca: en un gadget en la barra lateral, encima de las entradas, bajo la cabecera...

      Eliminar
  53. Muy bueno el tuto :D me ha servido de maravilla ^^, ahora tengo una duda :D ... como le hago para que se muestren de forma aleatoria?? porque siempre empieza por la primer imagen y yo quiero que sea al azar para que no siempre se muestre la primera... gracias por todo ^^

    ResponderEliminar
    Respuestas
    1. Hoy he publicado en tu honor el sistema para hacerlo. Sólo tienes que añadir una línea al código de entradas recientes.

      Eliminar
  54. Muy Buen aporte, Funciona correctamente !!
    Muchas Gracias.

    Saludos desde Temuco-Chile.

    ResponderEliminar
  55. Muy buen post, de muy fácil entendimiento. Me ha quedado como deseaba, solo hecho en falta el play / stop ¿para cuando un post con esto?

    Lo único que no logro funcionar es la ampliación de la foto, me falla el enlace sobre la imagen, tengo las fotos en Google+ y solo me da una dirección de cada foto ¿que diferencia hay entre URL Enlade y URL Imagen?

    ResponderEliminar
    Respuestas
    1. Nano, se trataba de hacer un slider de la manera más sencilla posible. Si lo empezamos a complicar, para eso a lo mejor conviene echar mano de algún plugin prefabricado.
      De todas formas lo tengo en mi agenda... para cuando aprenda como se hace, lo pruebe y tenga lugar para publicarlo. O sea, para dentro de mucho posiblemente :)

      Eliminar
    2. Gracias de todos modos. Tu post ha servido para lanzarme y sigo trasteando y aprendiendo, cuando tenga claro como van los play / stop (aún estoy en ello) te paso el código por si lo quieres.

      Gracias por el empujón.

      Eliminar
    3. ...al barranco XD

      Sigue el hilo de comentarios a partir del #60 que por ahí andamos con el mismo tema ;)

      Eliminar
  56. Buenas Oloman. Se que es un slider sencillo y he podido repetirlo 5 veces que era lo que buscaba pero hay alguna forma de añadirle las tipicas flechitas?
    He visto que en otro post tienes un slider sin java en el que aparecen.
    Graciasss

    ResponderEliminar
  57. Disculpe estimado, he editado un poco el código para ponerle las clásicas flechitas como dice Alice Blake, pero me falla en la flecha para retroceder. Este es el código modificado:

    $('#slider div:gt(0)').hide();
    $(".next").click(function(){
    $('#slider div:first-child').fadeOut(1000)
    .next('div').fadeIn(1000)
    .end().appendTo('#slider');
    });
    $(".prev").click(function(){
    $('#slider div:first-child').fadeOut(1000)
    .prev('div').fadeIn(1000)
    .end().append('#slider');
    });
    setInterval(function(){
    $('#slider div:first-child').fadeOut(1000)
    .next('div').fadeIn(1000)
    .end().appendTo('#slider');}, 5000);
    });

    ¿Cómo podría adaptarse correctamente?

    ResponderEliminar
    Respuestas
    1. Pues lo voy a ver Masato, porque lo que me faltaba era la idea y me la acabas de dar. Eso sí, lo que no se me ocurre es como combinar el automático con el manual. Ahora mismo se me ocurre como se puede hacer uno u otro, pero no ambos simultáneamente.

      Y date por contestado también Alice ;)

      Eliminar
    2. La modificación que hice "hace" los dos a la vez, a excepción de la flecha que cambia a la imagen anterior. He estado buscando por todo Google y probando diferentes formas de solucionarlo pero nada xD.

      Eliminar
    3. Creo que no lo hace bien Masato. Si por ejemplo cambias de diapositiva en el segundo 4, verás que al segundo siguiente ya hace el cambio automático. Habría que matar el proceso setInterval y re-arrancarlo (resetearlo) cuando se pinchara en una flecha

      Eliminar
    4. Acá lo modifiqué para que sean compatibles, eso si, la flecha de prev sigue sin funcionar:

      $(function(){
      $('#slider div:gt(0)').hide();
      function changeDiv(){
      $('#slider div:first-child').fadeOut(1000)
      .next('div').fadeIn(1000)
      .end().appendTo('#slider');
      }

      var interval = setInterval(changeDiv, 8000);

      $(".next").click(function(){
      $('#slider div:first-child').fadeOut(3000)
      .next('div').fadeIn(3000)
      .end().appendTo('#slider');
      clearInterval(interval);
      interval = setInterval(changeDiv, 4000);
      });
      $(".prev").click(function(){
      $('#slider div:first-child').fadeOut(500)
      .prev('div').fadeIn(500)
      .end().appendTo('#slider');
      clearInterval(interval);
      interval = setInterval(changeDiv, 4000);
      });
      });

      Eliminar
    5. :) Masato, entiendo que tendrás prisa por resolver el problema, pero yo necesito un poco más de tiempo para verlo y publicarlo. Efectivamente eso es lo que te dije que había que hacer para solucionar lo del temporizador, pero sobre lo otro, lo de la flecha atrás, aunque tengo la idea en mente, la tengo que plasmar y comprobar con código. A ver si la próxima semana lo puedo publicar.

      Además es que quiero hacer al mismo tiempo que el slider sea RWD (adaptable a todo tipo de pantallas)

      Eliminar
    6. No intento apurar, mi problema lo solucioné de una forma muy ortodoxa (utilizando contadores y puros IF pero ya no es tan dinámico el slider que programé xD), si no que simplemente quiero dar una mano, quizás hay quienes tienen un problema similar y ven el código y les sirve :)

      Eliminar
    7. Ok, OK... Muchas gracias entonces y perdona por el pequeño responso ;)

      Eliminar
    8. Hecho y publicado hoy, Masato ;)

      Eliminar
  58. Muy bueno pesa muy poco y eso es muy bueno

    ResponderEliminar
  59. Funciona y bastante bien. Se lo recomiendo a todo el mundo, y bastante más el código para estudiar, que es simple y directo. Pero dando una vuelta de tuerca al asunto, si tratamos de hacerlo Flexible y luego Responsive...Entonces ponemos variable el alto, y como resulta que como utilizamos hide() y show() pues q lo que está por debajo en el código del slider hace un efecto acordeón entre la desparación y la aparición.La solución es poner una altura mínima, pero entonces perdemos flexibilidad. Es un problema que no tienen esos sliders con plugins, pero yo soy amante de hacer las cosas sin plugins. Si encuentro solución les cuento.

    ResponderEliminar
  60. Buenas noches, al introducir el slider en la index.php pierdo la posición de el body y el sidebar, que puede estar ocurriendo. Gracias por la ayuda que puedan darme.

    ResponderEliminar
  61. No sé. Habría que ver en qué parte del código lo pusiste y como. Como caja independiente no te debería dar problemas.

    ResponderEliminar
  62. Aclaro primero que estoy aprendiendo, que tengo la página en php. y me gustaría saber cómo hago para que esté en una caja independiente para saber si lo hice así o no. Agradecería tu colaboración.

    ResponderEliminar
  63. Pero es en el index.php ya que en todo el resto de páginas la alineación se encuentra bien.

    ResponderEliminar
    Respuestas
    1. Insisto en que si no veo que estructura de cajas y selectores usas, me resulta imposible saber cual es el problema.

      Eliminar
  64. He probado este slide en mi pagina, cogiendo con un bucle las fotos de una base de datos, el problema lo tengo cuansdo en la base de datos solo hay una. Se ve esa y luego pasa como si hubiera una seguda y se queda en blanco. Porque podría ser?

    ResponderEliminar
    Respuestas
    1. Ese caso no lo había previsto porque no es normal hacer un pase de imágenes en el que sólo hay una ¿no?
      El problema debe estar en el .next() pues el script intenta localizar el siguiente que no existe. No veo arreglo salvo forzar a que haya al menos dos imágenes.

      Eliminar
  65. Hola, Gracias por tu respuesta. Lo solucioné haciendo lo siguiente (por si en un futuro le pasa a alguien)
    con mysql_num_rows($resultado del mysql_query) cuento los registros de la base de datos. Si solo hay uno, usando el style del slide pones una sola foto y si hay mas de uno, haces el slide normalmente como indicas.
    Un saludo y gracias por el slide, queda muy bien

    ResponderEliminar
    Respuestas
    1. Vale pues gracias, porque yo de SQL ni idea ;)

      Eliminar
  66. Hola Oloman , este slide me ha servido de mucho :) gracias por compartir y pues tengo una duda , al implementar este slide en mi pagina con 3 imagenes la cuestion es que en ocaciones al interacturar con otras paginas de mi web el slide falla en la ultima imagen y se ve un fondo negro dura 6 segundo para iniciar otra vez , pero si da un mal aspecto cuanto pasa este problema, sera conflicto de mi jquery???

    ResponderEliminar
    Respuestas
    1. No sé. Necesitaría más pistas. Por ejemplo ¿cuál es tu sitio?

      Eliminar
  67. Ola Oloman te dejo mi correo ahi te envió mi sito luis.armandosolishdz@gmail.com

    Espero y puedas ayudarme no he logrado sacar ese problema

    ;)

    ResponderEliminar
  68. Sigo sin poder ver lo que necesito, pero a priori si da problemas seguro es que este código choca con otro JS que puedas tener

    ResponderEliminar
  69. Hola amigo buen dia como esta ? Primeramente le escribo para felicitarlo por sus tutoriales que son muy buenos . Lo otro es que amigo estoy montando mi blog no se nada de sistema ni nada por el estilo , descargue una plantilla que es este modelo http://boardmag.blogspot.com/ pero cuando hago el procedimiento que es usted hace en su tutorial la plantilla no me carga las imágenes me sale así http://prueba2rc.blogspot.com/ he intentado pero nada que me sale las manganees con el slider Este es el link donde subi el codigo para que lo revises porfa https://onedrive.live.com/redir?resid=385DF155F2A6DEC1!372&authkey=!AAZ6b8veX6cbFRM&ithint=file%2c.docx Amigo de ante mano gracias y disculpa la molestia Buen dia

    ResponderEliminar
  70. En un principio, lo que pasa es que has metido la parte HTML (los DIV con las imágenes), dentro de un código JavaScript (lo veo a partir de tagName:"<div id="slider">) y tiene que ir fuera.
    Pero de todas formas, si no sabes nada de programación, esa plantilla te va a dar mucha guerra ;)

    ResponderEliminar
  71. Buenisimo, buenísimo, buenísimo!
    Sencillo slider sin más pretensiones. Un diez por tu trabajo en este blog.
    Muchas gracias por la ayuda.
    http://videocursofacil.blogspot.com.es/

    ResponderEliminar
  72. Me ha salido a la primera!!! Estoy encantada! He probado con un tutorial de otro blog y no me ha salido! El tuyo es perfecto! Lo he instalado en el de pruebas, cuando lo instale en el de verdad lo pongo aquí para que lo veas! Gracias!!!

    ResponderEliminar
  73. Hola, podria hacer que el vez de cambiar de imagen con un difuminado lo hiciese con un scroll horizontal? No entiendo de javascript y no se si se puede modificar este slider para hacerlo.

    Muchas Gracias!

    ResponderEliminar
    Respuestas
    1. No está pensado para eso, pero podrías hacer un apaño rápido con SLIDEUP/DOWN en lugar de FADEIN/OUT:

      <script type='text/javascript'>//<![CDATA[
      $(function(){
      $("#slider li:gt(0)").slideDown();
      setInterval(function(){
      $("#slider li:first-child").slideDown(1500)
      .next("li").slideUp()
      .end().appendTo("#slider ul");},8000);}
      );
      //]]></script>

      Eliminar
  74. Estoy haciendo el slider y copie y pegue pero no logro que me funcione, no se que estaré haciendo mal, no se si será la librería... Pongo después del Footer: abro script y pongo src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">... luego cierro script

    ResponderEliminar
    Respuestas
    1. ¿Quién dijo en el footer? Es justo detrás del cierre del SKIN. Allí es dónde tienes que cargar jQuery y a continuación el pequeño código JavaScript que logra que funcione el slider. Prueba a seguir al pie de la letra lo que se explica en este post.

      Y si una vez hecho no te funciona, cambia la versión de jQuery por la 1 por si acaso. Estás cargando la 2.1.1 y esa sé que tiene muchas novedades. Si no te es imporescindible con la 1 (sin más sufijos) tienes bastante.

      Eliminar
  75. Hola Oloman, primero felicitarte por la claridad de tu exposición.

    Lo tengo instalado en mis webs (que están alojadas en blogger) y funciona correctamente en FireFox, Chrome y Explorer. Tarda un segundo en cargarse y aparece durante un segundo una pantalla en blanco en el lugar que ocupa el slider. Aunque no interfiere en el resto de los componentes de la página.

    Pero en Android se cargan las imágenes una debajo de otra (me ocurre igual que el comentario 54) y las imágenes se ven durante dos segundos porque tardan más en cargarse, pese a que sean de menos de 100kb. Después funciona normalmente.

    En FireFox, Chrome, Explorer y Android funciona estupendamente en un diseño responsive, empleando el consejo tuyo de Variantes y personalización.

    Muchas gracias por tu solución Oloman.

    ResponderEliminar
    Respuestas
    1. Hola de nuevo Oloman, para ayudar a quien quiera un diseño responsive. Yo por ejemplo tengo imágenes de 354px de alto (height). El max-height va a depender del contenedor dónde ponga la imagen, para que en la transición no se vea ninguna parte de la imagen que va entrar en el slider. He tenido que tantear los píxeles y al final el código que ha propuesto Oloman me ha quedado así:
      width: 100%;
      max-height: 350px;

      En cuanto al Android, lógicamente carga los píxeles del max-height y como la pantalla es más pequeña, por eso se ven todas las imágenes. Y sin embargo funciona.

      Suerte y gracias por permitir esta aclaración.

      Eliminar
    2. He escrito ya diversas variantes sobre este slider, así que no sé qué código utilizaste finalmente. No obstante, la manera más efectiva de "blindar" el contenedor para que no aparezca en ningún caso una imagen bajo otra, sería incluyendo un overflow: hidden;

      Eliminar
    3. Siempre he seguido tus indicicaciones, e inserté overflow: hidden;

      En Firefox, Chorme y Explorer, funciona magníficamente, y encima responsive. Todo un éxito y enciam responsive. Sinceramente te has lucido.

      Pero en Android, con una pantalla de pocos píxeles, se cargan las imágnes una debajo de otra hasta llegar a los 350px, ya que puse un max-height: 350px;

      Ahora estoy intentando aprovechar el almacenamiento en caché del navegador para que el jquery no se cargue cada vez que se accede a la página en que está el slider. Sobre todo porque en Android, si entras en la página dónde está el slider, te metes en otra página aunque sea de la misma web, y vuelves a la página del slider, ocurre que las imágenes se ven al principo una debajo de otra. Hasta ahí he llegado.

      No obstante, te agradezco tu observación y ayuda.

      Eliminar
    4. Oops! Pues no sé Javier, sólo puedo achacar eso a que la conexión es lenta o el blog está demasiado cargado de contenido y que por eso ves momentáneamente las imágenes una encima de otra. Con el overflow: hidden no debería pasar ni siquiera un momento, pero a veces Android (e IOS) hacen cosas raras según los dispositivos.

      Lo de la caché es una buena idea, pero supongo que lo puedes controlar porque tienes un servidor propio ¿o hay otra manera?

      Eliminar
  76. ¿COMO PONGO UNA IMAGEN ESTÁTICA SOBRE UN SLIDER ?

    ResponderEliminar
    Respuestas
    1. Estático y Slider parecen términos contradictorios, porque uno es para indicar inmovilidad y el otro justo lo contrario, movimiento ¿Puedes ampliar la explicación sobre lo que pretendes hacer?

      Eliminar
  77. Hola, lo puse hace un tiempo y me iba perfecto, pero ahora he cambiado el blog a dominio y aparece el enlace roto a las imagenes del slider, por que puede ser??

    ResponderEliminar
    Respuestas
    1. Pues ahora mismo te funciona bien, pero veo como cosa rara que las imágenes las tienes alojadas en algún alojamiento externo. Personalmente yo las subiría al propio Blogger (o Picasa o Google fotos, que es lo mismo).

      Eliminar
  78. Hola, que código se necesita agregar para agregarle flechas y pueda pasa a la siguiente imagen

    ResponderEliminar
  79. Gracias gracias, pero... es posible ponerle un caption que se muestre con onmouseover?

    ResponderEliminar
    Respuestas
    1. Pues no me he puesto con eso, pero supongo que sí pues hay un .mouseover() en jQuery que sirve para programar cosas cuando pasas el puntero por algún elemento. Lo que pasa es que eso de que esté moviéndose el elemento no sé cómo le va a sentar al conjunto.

      Eliminar
  80. Hola muchas gracias por el post. Ando buscando un slide que sea una imagen estática y solo corra texto sobre ella, como para citar frases. Además que este texto sea tomado de ciertas entradas de mi blog. no sé si me puedas ayudar. Saludos.

    ResponderEliminar
    Respuestas
    1. Hmmm... Como cosa fácil y para usar este mismo sistema, se me ocurre que al contenedor general le podrías poner una imagen de fondo y esa haría las veces de imagen estática que quieres. Luego en la relación de imágenes tendrías que quitar estas y dejar sólo el texto.
      No sé seguro, pero pienso que con algunos ajustes podría funcionar.
      Por otra parte, para cargar directamente el contenido de las últimas entradas, en otro post expliqué esto. Entre una cosa y otra quizás puedas lograr lo que necesitas.

      Eliminar
  81. Hola Oloman! Yo tenía un lider en mi plantilla y quiero sacar todo lo relacionado a él, quería saber si esto forma parte del slider o no:
    .fp-title{color:#fff;text-shadow:0px 1px 0px #000;font:bold 18px Arial,Helvetica,Sans-serif;padding:0 0 2px 0;margin:0}
    .fp-title a,.fp-title a:hover{color:#fff;text-shadow:0px 1px 0px #000;text-decoration:none}
    .fp-content{position:absolute;overflow:hidden;padding:10px 15px;bottom:0;left:0;right:0;background:#111;opacity:0.7;filter:alpha(opacity = 70)}
    .fp-content p{color:#fff;text-shadow:0px 1px 0px #000;padding:0;margin:0;line-height:18px}
    .fp-more,.fp-more:hover{color:#fff;font-weight:bold}
    .fp-nav{height:12px;text-align:center;padding:10px 0;background:#333}
    .fp-pager a{background-image:url(http://3.bp.blogspot.com/-1vkgwXJkCuU/T71dAUeERDI/AAAAAAAAAcs/AnG2qaOI62w/s000/featured-pager.png);cursor:pointer;margin:0 8px 0 0;padding:0;display:inline-block;width:12px;height:12px;overflow:hidden;text-indent:-999px;background-position:0 0;float:none;line-height:1;opacity:0.7;filter:alpha(opacity = 70)}
    .fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -112px;opacity:1.0;filter:alpha(opacity = 100)}
    .fp-prev-next-wrap{position:relative;z-index:200}
    .fp-prev-next{position:absolute;bottom:130px;left:0;right:0;height:37px}
    .fp-prev{margin-top:-180px;float:left;margin-left:14px;width:37px;height:37px;background:url(http://4.bp.blogspot.com/-AWkp3F_6djM/T71dAaffcRI/AAAAAAAAAc0/ScKZxkg0SQU/s000/featured-prev.png) left top no-repeat;opacity:0.6;filter:alpha(opacity = 60)}
    .fp-prev:hover{opacity:0.8;filter:alpha(opacity = 80)}
    .fp-next{margin-top:-180px;float:right;width:36px;height:37px;margin-right:14px;background:url(http://1.bp.blogspot.com/-2SZ8sAYXvHA/T71dAu0PO1I/AAAAAAAAAc8/8vZ4-iFS_Ng/s000/featured-next.png) right top no-repeat;opacity:0.6;filter:alpha(opacity = 60)}
    .fp-next:hover{opacity:0.8;filter:alpha(opacity = 80)}

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. No lo puedo saber seguro viendo sólo ese trozo de CSS, pero lo tienes fácil: cópialo en un bloc de notas y luego lo quitas de la plantilla. Prueba durante unos días tu sitio y si no notas que falla nada, pues al menos seguro sabes que no te hacía falta ;)

      De todas formas sí que tiene pinta de ser el CSS de un slider... pero sin seguridad, quede claro.

      Eliminar
  82. Hola,
    Sería posible implementar este slider como intro del blog? Lo he estado probando con mis pobres conocimientos de javascript y nada.
    Gracias por tu ayuda de antemano ;)

    ResponderEliminar
    Respuestas
    1. El quid de la cuestión está en cómo montas esa intro, pues puedes hacerlo de varias maneras. Por ejemplo con una caja que se queda solapada sobre el contenido principal hasta que se hace clic en algún sitio o también con una página independiente que mediante un truquillo hará las veces de portada... entre otros.
      Pero en la mayoría de casos, lo que tendrás que hacer será simplemente "instalar" este sistema y luego meter la parte HTML (punto 2 del post) dentro del contenido de esa portada.

      Eliminar
  83. Hola! gracias por el aporte, tengo un problema a mi me funciono perfecto en safari y opera, pero en forefox, chrome y explorer se ve cada imagen debajo de la otra, que estaré haciendo mal?

    ResponderEliminar
    Respuestas
    1. El JavaScript lo único que hace es ir pasando las imágenes, así que si te salen de esa manera que dices, tiene que ser cosa de CSS. Prueba el que propuse en esta entrada e inicialmente ponlo exactamente igual. Te debería funcionar así y luego ya haces los cambios de estilo que necesites.

      Eliminar
  84. Eres genial, de verdad, sólo tengo un problemilla. A la hora de cambiar el fadein y el fade out, si el out no está en 0 me aparecen las dos imágenes que tienen que cambiar una sobre la otra hasta que cambia y se queda la segunda. No sé si me he explicado bien.

    Perdona, me equivoqué de entrada y puse este comentario en otro post xD

    ResponderEliminar
    Respuestas
    1. Así es. El valor 0 en fadeOut es para que NO se demore el desvanecimiento de la imagen "antigua" y que desaparezca de golpe. Así sólo se verá la nueva, la que toca en el carrusel, apareciendo poco a poco.
      Si lo cambias a un valor positivo ambas coexistirán durante un tiempo y la única forma de que todo funcione bien es solapándolas de manera absoluta con CSS, tal y como propongo en los cambios sobre el código base que propongo a lo largo de esta entrada.

      Eliminar
    2. Vaaaale, vale, vale, entonces yo lo había entendido mal. Pensaba el aspecto y esas cosas, no había entendido que servía para que se solapasen.

      Muchísimas gracias de nuevo :D

      Eliminar
  85. Hola, primero de todo gracias por tu web y por compartir y ayudar a los demás.
    Seguidamente te comento que tengo un problema, me dice que hay un error de sintaxis en el codigo de js en el:

    //

    me aparecen en gris y como error de sintaxis.

    Además de eso mis imagenes no se autorreproducen, se quedan en la primera.

    GRacias.

    ResponderEliminar
  86. aaag, no sale el sript, bueno, en la primera linea y en las dos últimas del codigo me da error

    ResponderEliminar
    Respuestas
    1. Hola. Si te da error o bien no lo estás poniendo dónde debes o bien no estás usando Blogger.
      En el segundo caso tendrías que eliminar tanto el //<![CDATA[ como el //]]>

      Eliminar
  87. Hola, al insertar el javascript me tira error en las ultimas DOS lineas:
    //]]>< / script >
    } ] ] >< / b:skin >

    ResponderEliminar
    Respuestas
    1. Ya pude solucionarlo, pero al copiar el codigo de este slider:
      http://www.oloblogger.com/2014/03/slider-sencillo-jquery-automatico-manual-rwd.html, no me funciona, queda estatico. Por que sera?

      Eliminar
    2. ¿Ya te funciona, no? :)

      Eliminar
  88. hola estoy haciendo un slider agrege la parte del skin y coloque las imagenes pero no se donde colocar esto
    #slider {
    position: relative;
    overflow: hidden;
    width: 500px;
    height: 300px;
    border:10px solid #333;
    border-radius: 40px;
    margin: 0 auto;
    padding: 0;
    }

    ResponderEliminar
    Respuestas
    1. Javier, eso y lo que viene después es el CSS, ese código que da el aspecto de un sitio (de la estructura se ocupa el HTML).
      Si editas tu plantilla comprobarás que hay dos etiquetas SKIN. Pues bien el CSS debería ir entre ambas y de hecho allí verás código con una estructura similar a este del que hablamos.
      En este caso copia todo eso justo antes del cierre (el segundo) SKIN.

      Aquí tienes más información sobre esto del CSS porque es básico si vas a ir personalizando tu blog.

      Eliminar
  89. Hola Oloman, sabrías como quitar las viñetas de delante? Los puntos azules digo, no sé por qué aparecen... He intentado todo con el código pero no se me ocurre a qué se debe su aparición ahí... Muchísimas gracias.

    elfestindelossentidos.blogspot.com.es/p/recetas.html

    ResponderEliminar
    Respuestas
    1. Hola Bea. Me suena ese sitemap ;)

      Para que no te salgan las viñetas busca en tu CSS este selector y añádele la última línea que ves a continuación:
      ul.bsitemap, ul.bsitemap ul, ul.bsitemap li {
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
      }

      Eliminar
    2. ♥ Eres el mejor! Muchisísimas gracias!!!! Me has hecho feliz el día! :D

      Eliminar
    3. El día que lo puse te escribí 50 comentarios (exagerando, claro jajaja) y luego los iba borrando porque iba solucionando cosas... Y al final en este no te puse las gracias porque evidentemente todo el código es tuyo!! Me las vi y me las desee para entenderlo después del mensajito broma jajajaa Pero te lo agradezco mucho, creo que queda simplemente genial!

      Eliminar
  90. ¿Qué tal Oloman? Gracias por compartir estos trucos para el blog. Yo entendía cero lo que era el html y CSS, pero algo he aprendido por fuerza para mantener mi pagina como me gusta, todo a base de ensayo y error.
    Estuve buscando mucho un slideshow sencillo como este para mostrar las portadas de mis libros. Deseaba algo bien minimalista que no desviara la atención del objetivo principal. La verdad es que encontré páginas donde se hacen on line y gratis, pero tienen accesorios que no me gustaron , y el de blogger es muy limitado. Este me quedó perfecto, salvo que no se veía en la posición que yo deseaba, y escarbando por ahí dí con la solución. Agregué así el código CSS en las opciones avanzadas del diseñador de plantillas, por si alguien no quedara conforme con la posición:

    #slider {
    position: relative;
    overflow: hidden;
    slide-widget [align: center;]
    width: 200px;
    height: 280px;
    border:0px;
    border-radius:0px;
    margin: 0 auto;
    padding: 0;
    }

    Muchas gracias nuevamente y te invito a ver mi blog para que mires cómo se ve.
    Saludos cordiales desde Chile!

    http://pilarlepe.blogspot.com

    ResponderEliminar
    Respuestas
    1. Perfecto Pilar. La ventaja de este slider es precisamente que puedes configurarlo como quieras fácilmente ;)

      Eliminar
  91. Hola que tal si quiiera meter el Scrip dentro deun Js separado como podria llamarlo desde html .. Gracias !!

    ResponderEliminar
    Respuestas
    1. Pues no le veo la utilidad ni la ventaja de cargar externamente este código, pero simplemente se trataría de grabarlo en un fichero .js, nombrarlo (por ejemplo slidersimple.js) y alojarlo en algún sitio.

      Luego tendrías que llamar a ese código mediante un...
      <script src='http://direccion_fichero/slidersimple.js' type='text/javascript'/>

      Eliminar
  92. una pregunta, por que no rotan las imágenes? solo me sale una y ahí se queda no pasa a la siguiente imagen.

    ResponderEliminar