Slider adaptable sin JavaScript, sólo CSS | Oloblogger Esta forma de contruir un slider de imágenes que vi en CSS Science tiene dos cosas que me gustan. U...

7 de mayo de 2012

Slider adaptable sin JavaScript, sólo CSS

Esta forma de contruir un slider de imágenes que vi en CSS Science tiene dos cosas que me gustan. Una es que todo se monta con CSS y no es necesario utilizar JavaScript. La otra es que la caja del visor se adapta al tamaño de la ventana automáticamente. Es fácil comprobarlo abriendo y cerrando esta misma que estás leyendo.

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.

#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%; }


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éis descargarlo desde este enlace o desde este otro.


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 de <b:skin><![CDATA[/*:

<link rel='stylesheet' type='text/css' href='FICHERO_ESTILO.CSS'/>

Enlace a alojamiento externo desde un post (o desde plantilla, antes de </head>:

<style type="text/css">
@import url(FICHERO_ESTILO.CSS);
</style>


Una vez que tenemos nuestro CSS ya sólo resta construir el visor en sí mismo mediante HTML. Esta sería la estructura. Los DIV INFO y su contenido son opciones:

<div id="slider">
<input checked type="radio" name="slider" id="slide1" />
<input type="radio" name="slider" id="slide2" />
<input type="radio" name="slider" id="slide3" />
<input type="radio" name="slider" id="slide4" />
<input type="radio" name="slider" id="slide5" />
<div id="slides">
<div id="overflow">
<div class="inner">
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label><label for="slide2"></label><label for="slide3"></label><label for="slide4"></label><label for="slide5"></label></div>
<div id="active">
<label for="slide1"></label><label for="slide2"></label><label for="slide3"></label><label for="slide4"></label><label for="slide5"></label></div>
</div>


Nachzeher se molestó en desarrollar el CSS necesario para un slider con 6 imágenes y nos lo pasó. Lo tenéis en el siguiente enlace.

Recordar que además de ese estilo al código HTML (el del final del post) hay que añadirle el sexto elementos en todos sus apartados: en los primeros input, en los article y en los label, tanto en controls como en active

¿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

111 comentarios :

  1. Hola, Oloman. Ya había visto sliders como este, pero está bastante resumido y es más fácil de adaptar. Quiero avisarte que he intentado expandir el código con el spoiler pero no funciona. Saludos

    ResponderEliminar
    Respuestas
    1. Ok. Ya lo he arreglado. No había podido conectarme antes. Gracias.

      Eliminar
  2. Cómo me gusta! lo he visto en varios blogs y no encontraba manera de entenderlo. Pruebo Olomán, saludos :)

    ResponderEliminar
    Respuestas
    1. Sólo advertirte que esto no te muestra los posts recientes ni nada de eso. Lo digo porque eso es probablemente lo que más has visto por ahí. Esto es un visor simple para imágenes y texto con enlaces. La diferencia es que los primeros generan automáticamente su contenido y en este tienes que ponerlo a mano. Como se comenta en la entrada, este no usa JavaScript y en los otros es prácticamente imprescindible.

      Eliminar
    2. No, lo vi en fotografías como una galería de imágenes :)

      Ahora estoy probando, saludos!

      Eliminar
    3. Gracias :)
      Estoy tratando de hacerlo más pequeño, con poco tiempo libre...aparezco y desaparezco...que tengas buen día.

      Eliminar
    4. Olo, qué parte debo cambiar para el tamaño? las imágenes deben ser iguales?

      Eliminar
    5. La característica más destacable de este visor es que es adaptable, es decir, que su tamaño ocupa siempre el máximo ancho disponible ampliándose o reduciéndose según sea necesario. Sobre las imágenes, no lo he probado, pero sospecho que sí.

      Eliminar
    6. Muchas gracias, buen domingo :)

      Eliminar
  3. Excelente, es bueno a veces no tener que usar tanto javascript xD

    Saludos gente!

    ResponderEliminar
  4. Me pasa algo me salen 2 fotos por vez y no entiendo porque si esta el while recorreindo uno a uno

    ResponderEliminar
    Respuestas
    1. Tu perfil me indica que tu blog ha sido eliminado. ¿Tienes alguna otra dirección dónde tengas montado esto para verlo?

      Eliminar
    2. Hola, a mi me pasa lo mismo, como se soluciona?

      Eliminar
    3. Lo mismo te digo entonces ¿me pasas una dirección dónde lo pueda ver?

      Eliminar
  5. Hola,

    Muy buen código, lo he utilizado para mi web y va perfeto!
    Por otra parte, ¿sabes si existe alguna forma de hacerlo para que las imágenes pasen automáticamente sin usar Javascript u otro lenguaje similar?

    Por otra parte, ¿cómo se modificaría para que los círculos del control sean más grandes y con algo de separación entre ellos?

    Muchas gracias por adelantado,

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Puede que sí, pero eso no lo controlo todavía. Seguramente sería con animaciones (distinto de transiciones)-

      Lo de los círculos es más fácil una vez que sabes que el estilo depende de #active label.

      La primera línea es añadida y las 2, 3, 4, 6 y 7, modificadas en cuanto a valores. Pruebalo y luego ya personalizas.

      active label {
      margin: 5px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;

      display: inline-block;
      width: 20px;
      height: 20px;

      background: #BBB;
      }

      Eliminar
    2. Perfecto! me ha funcionado y me gusta casi tal cual me lo has puesto así que muchas gracias!

      De lo otro buscaré a ve que hay, pero la verdad que este está genial.

      Un saludo.

      Eliminar
  6. Buenas tardes! Me gusto mucho su slider. Solo me preguntaba si habria una forma de editar el codigo para que las imagenes se pasen solas :) Muchas gracias y felicidades por su gran ingenio!

    ResponderEliminar
    Respuestas
    1. Bueno, como cito en el post el código está sacado de otro sitio web, así que el mayor mérito no es mío en este caso.

      Y no, no es posible que pasen solas porque habría que regenerar todo el código. Dicho de otra manera, sería otro sistema distinto.

      Eliminar
  7. Hola oloman,,, es la primera vez que visito tu web,, me gusta mucho... copie este codigo lo adapte a una plantilla joomla 1.5 que estoy diseñando... funciona perfecto... pero no consigo cambiar de color de fondo y de borde... si sabes como cambiarlo o si alguien sabe me gustaria que compartieran....

    ResponderEliminar
    Respuestas
    1. Hola. Eso lo tienes que modificar desde el trozo de código de estilo (css). Está en esta zona y sólo tienes que cambiar los background y los border:
      /* Slider Styling */
      #slides {
      margin: 45px 0 0;
      -webkit-b...

      Eliminar
    2. Logre Cambiarlo... Gracias Oloman eres un genio.. jeje... espero que pases por mi trabajo gracias a ti para mirar como quedo http://www.roproduccionespy.com/, cuando necesites me gustaria aportar tambien mis conocimientos..

      Eliminar
    3. Si son compatibles con Blogger, cuando quieras.

      Eliminar
  8. Hola, muchas gracias por las explicaciones, funciona perfecto para mozilla, pero no logro los mismos resultados en explorer. Es un problema común o hago algo mal?
    gracias.

    ResponderEliminar
    Respuestas
    1. No sé qué versión de Explorer utilizas, pero aunque la 8 y sobre todo la 9 han mejorado un poco, lo normal viene siendo que no funcione nada en ninguna :S

      Eliminar
    2. Disculpa contestar tan tarde y muchas gracias por hacerlo tan rápido.
      Lo he utilizado con las 2 y no me ha funcionado, es una pena, espero que mejore o seguirá siendo cada vez menos usado.
      De todos modos, cuando abro este link (el tuyo) en explorer, aunque no tiene el mismo efecto, al menos aparecen las imagenes en su lugar, en mi caso tan solo muestra la primera y el resto como una tira de imagenes vertical. Sabrías decirme porqué puede ser esto?

      Muchas gracias otra vez.

      Eliminar
    3. No sé. Puede que lo estés poniendo en una entrada como yo hice aquí y si es así, tienes que quitar todos los saltos de línea que puedas.

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

    ResponderEliminar
  10. Hola Oloman, en que parte del código se puede cambiar el tamaño del slider?

    ResponderEliminar
    Respuestas
    1. Pues está en los width, pero una de las ventajas de este slider es que se adapta al ancho disponible. Si no quieres que ocupe el total del ancho, tendrías que meter todo el HTML en un DIV con un ancho en px o que fuera inferior al 100%.

      Eliminar
    2. disculpa y eso como ese hace??

      Eliminar
    3. Sigo recomendando que sea adaptable, pero si quieres ponerle un ancho inferior al de la caja dónde esté, lo más fácil es que en esta parte:
      #slider {
      text-align: center;
      margin: 0 auto;
      -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
      }

      ...añadas un max-width con el valor en píxeles que quieras como máximo.

      #slider {
      text-align: center;
      margin: 0 auto;
      -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
      max-width: 400px;
      }

      Eliminar
  11. Buenos días Oloman, después de darte mucha guerra he conseguido poner la plantilla de la tienda "a mi aire", pero he descubierto que esto es adictivo... ahora veo cosas por ahí y me digo: ¿esto como se hará? y empiezo a buscar por la red como una loca.
    El caso es que he visto este slider http://ilbauleverde.blogspot.com.es/
    que me ha gustado mucho y no encuentro nada que me oriente ¿puedes hacerlo tu?
    Un saludo y mil gracias. (no sabía donde poner esta consulta)

    ResponderEliminar
    Respuestas
    1. Lo veo, pero no te puedo prometer que lo publique porque ando mal de tiempo.

      Eliminar
  12. No pasa nada Oloman, ¡no hay tiempo para todo!
    Gracias de todos modos por la respuesta

    ResponderEliminar
    Respuestas
    1. Estoy en ello, pero sigo afirmando lo mismo porque me falta saber cópmo poner rótulos de texto ;)

      http://oloblogger-pruebasdiversas.blogspot.com.es/p/tableros-pinterest-version-2.html

      Eliminar
    2. que bonito queda! es que el carrusel de la tienda me marea un poco... quizás pueda adaptar algo como esto; aunque tampoco tengo muy claro a que altura.

      Te dejo el enlace de la tienda que hemos hecho a medias...:)
      http://makudenda.blogspot.com.es/

      Eliminar
    3. Has escogido una combinación de colores muy agradable a la vista ;)

      Eliminar
  13. muchacho, buenas!
    te cuento que estamos tratando de adaptar el slider a tres imagenes, aunque no conseguimos hacerlo sin dejar el slider inutilizable..

    ResponderEliminar
    Respuestas
    1. Dame una dirección dónde lo tengáis montado y os digo exactamente, aunque en un principio pienso que debería funcionar si en la parte HTML quitáis los INPUT correspondientes al SLIDER4 y SLIDER5, los dos últimos ARTICLE con su contenido y los dos últimos LABEL (SLIDE4-SLIDE5)

      Eliminar
  14. Hola Oloblogger! Muchas gracias. Pero una cosa, ¿dónde inserto el código div=slider? Gracias

    ResponderEliminar
  15. Vale, ya sé donde insertarlo, pero esta línea me falla al insertarlo

    input checked type="radio" name="slider" id="slide1"

    Me dice

    Element type "input" must be followed by either attribute specifications, ">" or "/>".

    ResponderEliminar
  16. Le he quitado el "checked" y me funciona, lo único que no me queda del todo bien son las descripciones que me quedan en una fuente rara sobre la imagen. ¿No se pueden poner debajo?

    ResponderEliminar
  17. Una pregunta más importante. ¿Se puede hacer para que la imagen que salga al cargar la página sea aleatoria? ¿Cómo? Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola. La "gracia" de este sistema es que es adaptable a la ventana del usuario y que no necesita JavaScript (bueno, son dos "gracias").

      Eso tiene ventajas pero también inconvenientes, como que sólo puede manejar imágenes fijadas de antemano. No podríamos hacerlas aleatorias si no metemos JavaScript.

      Con respecto a la fuente, las clases INFO son las que controlan el aspecto de los rótulos. Las tienes para modificarlas a partir del comentario /* Info Box */

      Eliminar
  18. Oloman, genial slider, pero no me funciona en IE, te dejo una muestra:
    http://www.club17deagosto.com.ar/2013/index.html

    ResponderEliminar
  19. Oloman, tenes idea como agregar mas imagenes al slider?

    ResponderEliminar
    Respuestas
    1. En esa página que me pusiste no funciona NADA ;) No obstante te confirmo que en IE9 sí funciona, aunque en versiones inferiores es muy posible que no.

      Agregar más imágenes es algo laborioso, porque esto es prácticamente en plan experimental.

      Por ejemplo para una sexta imagen, habría que añadir y cambiar bastantes cosas en el CSS, que serían para incluir las clases de esa sexta imagen:
      - Añadir #slide6:checked ~ #slides .inner { margin-left:-500%; }
      - #slide5:checked ~ #controls label:nth-child(1) sería con un nth-child(6) y tendrías que añadir una #slide6:checked ~ #controls label:nth-child(1)
      - Añadir #slide6:checked ~ #controls label:nth-child(5)
      - Añadir #slide6:checked ~ #active label:nth-child(6)
      - Añadir #slide6:checked ~ #slides article:nth-child(6) .info

      Luego en el HTML también habría que añadir líneas, pero todo con la misma estructura:
      - input type="radio" name="slider" id="slide6"
      - Añadir un ARTICLE más con todo su contenido
      - Añadir una LABEL más tanto a CONTROLS como ACTIVE

      Creo que no se me olvida nada, pero como puedes imaginar es algo engorroso y por eso tampoco te puedo detallar más. Lo malo es que no he publicado sobre ningún otro visor parecido para darte otra alternativa.

      Eliminar
    2. Hola.
      Muy buena la aplicación
      Agregué 3 imágenes más, o sea 8. Funciona pero a partir de la imágen 6 aparece debajo de la primera, la 7 debajo de la 2 y la 8 debajo de la 3.
      Tenés idea que podrá ser

      Gracias!!

      Eliminar
    3. Hola de nuevo:
      Acabo de resolver el problema.
      Además de toda la modificación que mencionaste arriba, hay que hacer lo siguiente :
      #slides .inner {
      width: 500%; (por 1000%)
      }

      #slides article {
      width: 20%; (por 10%)
      }

      Saludos

      Eliminar
    4. Ah, perfecto Ale. Publico tantas cosas que no recuerdo los detalles cuando pasa un tiempo y evidentemente eso se me escapó. Gracias :)

      Eliminar
  20. Muy buenas.
    Cómo puedo quitar el borde del slider?
    Gracias!!

    ResponderEliminar
  21. En #slides por box-shadow: none; padding: 0;

    ResponderEliminar
  22. Una última pregunta, si no es mucha molestia: Cómo puedo cambiar el estilo de los botones? Me gustaría que fuesen imágenes...

    Muchas gracias Oloman ;)

    ResponderEliminar
    Respuestas
    1. Pues no lo sé a ciencia cierta, pero en un principio quizás sirva con meter una imagen entre las etiquetas LABEL del HTML: <label for="slide2">AQUI</label> Haz la prueba primero con texto a ver si funciona, aunque también tendrás que cambiar las propiedades CSS de #active label para hacer al menos más grandes esos pequeños botones.

      Eliminar
  23. Hola! una duda. El slider me funciona a la perfección integrado en la web, pero al meter las imágenes del mismo tamaño que la de muestra "fish.jpg" me amplia el ancho de la página con el ancho total de las imágenes. Por ejemplo:
    Ancho de la página con el código insertado y sin imágenes 1000px.
    Ancho de la página con el código y 5 imágenes: 4000 px (1000 de la página y otros 3000 de las imágenes) Sabes/saben a qué puede deberse?? me aparecen los div de los autores/nombre, y no las imágenes

    ResponderEliminar
    Respuestas
    1. No sé decirte porque a priori podrían ser muchas cosas. Sin embargo, como este slider es adaptable creo que tendrá que ver con la estructura de tu blog. Tendría que ver la página dónde lo tienes puesto.

      Eliminar
  24. Hola, oye y las imagenes cambiasn automaticamente cierto periodo de tiempo o solo a darle clic

    ResponderEliminar
    Respuestas
    1. Hola.

      Este código sólo funciona con clic y por tanto las imágenes no pasan solas. Hay muchos tipos de sliders y cada uno tiene sus propias características. Por ejemplo este otro sí lo hace, pero no es adaptable tal cual lo publiqué. Habría que retocar el CSS para que así fuera y quizás algo más.

      Eliminar
    2. Yo he encontrado este sólo con CSS:

      http://www.script-tutorials.com/css3-fade-slider/

      Eso sí, va con px fijos no con %

      Eliminar
  25. como hago que me quede mas pequeño, me ocupa toda la pantalla y quiero dejarlo pequeño en que parte modifico gracias

    ResponderEliminar
    Respuestas
    1. Es que esta galería es precisamente para eso, para que ocupe todo el espacio disponible. Cuando se hace la ventana del navegador más pequeña se reduce, pero siempre ocupando todo el ancho que puede.

      Si quieres limitarlo tendrías que meter todo el HTML (el último trozo de código) en una caja con un max-width. Algo así:
      <div style="max-width:600px;"gt;
      CODIGO HTML
      </div>

      Eliminar
  26. veo las fotos, pero los botones no funcionan, ni se visualizan las flechas. estoy en css, en html. dentro de head tendre algo mal ? gracias.......

    ResponderEliminar
    Respuestas
    1. Uff! Eso de CSS, dentro de HTML, dentro de HEAD me despista. En el primer botón está todo el código para poner antes del cierre SKIN, que es la primera opción que comento. Ahí iría todo ese código que es CSS.

      Luego, en la entrada, en una página o en un gadget, es dónde habría que poner la parte HTML (citada después en la entrada).

      Eliminar
  27. perdon por mi ignorancia, soy nueva en esto. no tengo SKIN. Solo head, title,style , y paso a body.
    Donde iria ?

    ResponderEliminar
    Respuestas
    1. Si tienes Blogger seguro que tienes un par de SKIN. A veces al acceder a la plantilla aparece "comprimido" pero al pinchar en la flechita negra que tendrá a la izquierda, se despliega todo su contenido. De todas formas y aunque me extrañaría que fuera así, si no encuentras el sitio también lo puedes meter entre las etiquetas STYLE.

      Eliminar
  28. Tipee todo con wordpad....Sera recomendable trasladarlo a un editor ? ...Quizas ahi estara skin ? Que editor se recomienda ? Muchas gracias.....

    ResponderEliminar
    Respuestas
    1. Si se trata de recomendar, yo te recomendaría que teclearas directamente en el editor de Blogger. A veces cuando usas editores externos y se copia y pega en Blogger, esos editores te meten caracteres extraños adicionales.

      Eliminar
  29. Hola Oloman, tiene algun slider en css que se cambie solo por cierto tiempo??Espero tu respuesta..

    ResponderEliminar
  30. Hola Oloman,
    Muchas gracias por el post. estoy intentando colocar las flechas pegadas a cada lado, vamos, que no se queden tan en el centro de la imagen y no doy con ello.
    Supongo que la cosa está aquí:

    #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(images/flecha_derch.png) no-repeat;
    float: right;
    margin: 0 -70px 0 0;
    display: block;
    }


    Por intuición, creo que debería tocar esto:
    margin: 0 -70px 0 0;

    pero al hacerlo no cambia nada, quizá haya algo más en el CSS que deba cambiar...

    ResponderEliminar
    Respuestas
    1. Sí, Pablo, es ahí, en el margin derecho (-70px). Prueba con un valor del orden de 130px pero luego localiza también el que flota a la izquierda y haz lo mismo. El problema es que si subes tanto el valor, al hacer más pequeña la ventana las flechas te pueden quedar fuera del slider y por tanto, no visibles.

      Eliminar
    2. Gracias, Olomán. No había visto el mensaje hasta ahora. Ya lo solucioné.

      Eliminar
    3. Para otra vez suscríbete a las entradas (casilla "Avisarme") y así te enteras en cuanto alguien conteste ;)

      Eliminar
  31. Gracias, Oloman.

    He conseguido, no sin algunos sudores :-), colocar 14 imágenes.

    Ahora estoy haciendo otro slide con 6 imágenes. Y aquí necesito que las imágenes estén activas, es decir, que al clickar en cada una de ellas me lleve a una página diferente. Pero de momento no acabo de dar con ello.

    He probado con los .info, para que al menos los títulos estén activos, así en:

    #slider .info

    pongo

    #slider .info a

    para luego hacer un

    #slider .info a:hover

    pero no estoy obteniendo resultados...

    ResponderEliminar
    Respuestas
    1. Hola. Lo que pasa es que estás intentando hacer algo -que no entiendo- en CSS y los enlaces los creas en la parte HTML.

      Para lo que dices hay que añadir un enlace a cada imagen así:
      <a href="URL_ENLACE"><img src="https://lh3.googleusercontent.com/-mV2jjLU128A/T39fUmw9o0I/AAAAAAAACi0/GxZUCn7DCzs/s800/Big%2520Wave.jpg"></a>

      Eliminar
  32. VER/OCULTAR Muéstranos esa acción =) Muchas gracias por las herramientas que nos entregas.

    Saludos Master!!!! =D

    ResponderEliminar
    Respuestas
    1. Eso fue una materia de hace mucho tiempo Erick.

      Hay muchos sistemas, pero este es muy sencillo y funciona sin necesidad de ninguna librería adicional.

      Eliminar
  33. Una pregunta se podria aumentar la cantidad de imagenes que puede contener este slider?

    ResponderEliminar
    Respuestas
    1. Sí, es algo que está comentado más arriba, pero resulta algo farragoso como verás.

      Eliminar
  34. Hola, Ante todo muchisimas gracias por el tutorial. me ha salido todo bien hasta el momento que intento agregar una imagen mas.
    he seguido las instrucciones que indicas mas arriba pero no me ha funcionado.
    Si tienes el codigo del css ya modificado y puedes compartirlo, me ayudarias mucho.

    Saludos

    ResponderEliminar
    Respuestas
    1. No lo tengo Naxhzeher ¿Viste que en 19.3 alguien aportó lo que faltaba?

      Eliminar
    2. Hola, Despues de un largo rato , lo he logrado.. Gracias

      Adjuntare el contenido del archivo css

      Eliminar
    3. Esta modificado para 6 imagenes

      https://dl.dropboxusercontent.com/u/11067547/CSS%20GALERIA.txt

      Eliminar
    4. Gracias. Lo incluyo en el post ;)

      Eliminar
  35. Os paso el Slider modificado para 10 imágenes

    http://codepen.io/sangorrin/pen/MYwROa

    ResponderEliminar
    Respuestas
    1. OK. Gracias, pero parece que se perdió el "responsive"...

      Eliminar
    2. Solucionado el "responsive". Algo se me había colado. ;)

      http://codepen.io/sangorrin/pen/MYwROa

      Eliminar
    3. Mucho mejor ahora :)
      Es que sin ese detalle el slider ya no tendría ninguna ventaja.
      Gracias de nuevo

      Eliminar
  36. Hola Oloman, Tengo un problema con el #slides .inner width:500% , en navegadores Iexplorer y Firefox me esta creando un espacio gigante en blanco a la derecha de la pagina, y si trato de controlarlo dandole un max-width al body las imagenes del slider se me convierten en minuaturas y se pierde todo. Como podria hacer para corregir esto? veo que en el post funciona a la perfección, pero no logro encontrar con que estas controlando esa situación. Quedo atento...

    ResponderEliminar
    Respuestas
    1. Pues realmente no sé cómo no te funciona a tí y aquí sí que lo hace, por lo que debo suponer que alguna cosa te comiste al traspasar el código. De todas formas prueba con un overflow: hidden; para el ID #slider

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

    ResponderEliminar
  38. Perdona Oloman, es otro tema, pero de hecho fue el que me llevó hasta este blog...
    Formulo mi duda aquí... por si le inquieta a alguien más:

    El lighbox por defecto de blogger no es responsive... hay manera de adaptarlo?

    Me gusta su aspecto con las miniaturas, la navegación y la pantalla completa. Hay otros linghtboxs, fancyboxs o como los llamemos, que se parecen en aspecto al lightbox de blogger pero la implementación en blogger (sin wordpress y sin plugin es imposible) me resulta imposible!

    La mayoría de mis contenidos (portfolio) se basan en la imagen, por lo que me resulta del todo vital. El lightbox de blogger (con el css personalizado) me hace el apaño pero en versión móvil es un horror!

    Seguiré con la búsqueda...

    ResponderEliminar
  39. Pues parece que he encontrado un lightbox bonito y sencillo de implementar! se llama Fresco, es responsive y tiene muchas opciones de uso! Por si le vale a alguien http://www.frescojs.com/documentation/usage

    ResponderEliminar
    Respuestas
    1. Ok. Pues gracias Ainhoa. Hay muchas opciones a pesar de que decías que era difícil. Otra cosa es que cueste adaptarlos a Blogger, pero haberlas haylas.
      Me ha gustado tu diseño y precisamente me fijé porque hace poco hice una plantilla con ese efecto de menú desplegable por el lado y ahora estoy a medias de otra.
      Piensa en poner un fixed en el icono que despliega el menú, ya que cuando bajas (scroll), el menú permanece abierto y el icono se pierde por arriba ;)

      Eliminar
  40. Gracias por ese consejo! Era algo que quería solucionar y no sabía como! Llevo poco tiempo trasteando con el CSS y el html, y poco a poco voy adaptando el diseño de la plantilla.

    ResponderEliminar
  41. Muy bueno, es el primer slider echo solo con CSS que SI consigo adaptar y modificar a mi CMS y a mi gusto, muy bonito, sencillo y genial. lo podeis ver funcionando en esta URL, mi intencion no es hacer spam ;)
    http://www.zubiondojatetxea.com/?zona=Noticias&arch=articulo&id=1

    Gracias por todo ;)

    ResponderEliminar
  42. Hola, noto que el slider se adapta a las imagenes, ¿cómo hago que las imagenes se adapaten al slider? :D Agradezco mucho la ayuda que me den

    ResponderEliminar
  43. Sobre mi comentario anterior, tengo ese problema solo en el alto, el width se adapta bien

    ResponderEliminar
    Respuestas
    1. Hola ¿me podrías pasar una dirección dónde vea cómo lo tienes montado?

      Eliminar
  44. saludos bloggers, he pasado por aqui por curiosidad y es primera vez que paso y veo que le codigo html esta muy complejo, se puede hace un slideshow automatizado y que puedas seleccionar la imagen a tu antojo sin necesidad de detener la animacion siempre y cuando se deje el mouse sobre el boton o la imagen seleccionada en el slide show con menos de 30 lineas de html minimo con 16 lineas y 4 imagenes hasta de 1000 imagenes, sin necesidad de usar java, hubiese aportado el codigo html pero la web no permite publicar etiquetas,puedo hacer un slide auto con selector y pausa de animacion en puro CSS con solo 142 lineas cualquier duda grullon1104@gmail.com

    ResponderEliminar
  45. Hola buenas Oloman, he probado tu slide en mozilla y en explorer y no funciona. Una verdadera pena porque me servia para hacer algo mucho mas complejo que un slide pero cuando ya tenia el trabajo bastante adelantado me he dado cuenta que solo funciona en chrome. ¿Hay alguna soluccion? HELP

    ResponderEliminar
    Respuestas
    1. Siempre ha funcionado en Firefox y en Explorer, precisamente porque está basado en CSS. Ahora mismo lo acabo de comprobar en esos dos navegadores y sigue funcionando.

      Quizás las modificaciones que introdujiste fueron las que hicieron saltar algo.

      De todas formas si vas a hacer algo que no sea un slider, te convenga "otra cosa" que no sea un slider :D

      Eliminar
  46. No entiendo absolutamente nada, me lo he leído muchísimas veces y nada. Será porque hablas de una manera muy técnica y yo soy una novatilla jajaj. Donde coloco los códigos del HTML? Cuales son exactamente? todos? y en que orden? van uno detrás de otro? estoy perdidisima.

    ResponderEliminar
    Respuestas
    1. Hola Mariela. Este post precisamente no es para novatos pues si bien copiando y pegando a todos os saldrá, cualquier modificación necesita conocer bien CSS.

      De todas formas hay un par de cosas básicas que creo necesitas saber y que te valdrán para cualquier tutorial. Una la expliqué expresamente y es que el CSS va en la plantilla detrás de cierta etiqueta (SKIN). Eso con que lo hagas tal cual explico (con más detalle en el post) funciona.

      Luego está la parte HTML, que puede ir (también en la plantilla) entre las etiquetas </head&gtM y </body> de la plantilla o bien desde Diseño, creando un nuevo gadget HTML/JavaScript y pegando dentro el código. Aquí la opción será según te digan. En el caso de este slider sería dentro de un gadget creado nuevo.

      Creo que te vendrá bien echar un vistazo a este otro artículo en el que intento explicar esto de qué es el CSS y el HTML. Sabiendo eso es fácil seguir cualquier tutorial.

      La verdad es que a veces no lo digo porque para todos los tutoriales, esa parte de dónde va cada cosa es siempre igual.

      Si te gustó el enlace, mira también este otro.



      Eliminar
  47. Muchísimas gracias, Oloman. Probe a poner tu slide simplemente añadiéndole las imagenes y tampoco me funciono. ¿ Sera porque lo puse en un pagina y no en un gadget? Por lo que te refieres a que lo que busco no es un slide, en cierta manera tienes razón pero este me servia, lo que yo le añadía en cada ARTICLE son varios DIV mas para superponer capas con otras imágenes y en CHROME si que funcionaba y todas las capas se movian con la imagen principal pero en los demas me aparecian todas las capas en la primera imagen.
    De nuevo mil gracias por responder
    Aqui te dejo el enlace de lo que estaba haciendo ( http://pruebastele.blogspot.com.es/p/titulo-autor-titulo-autor-titulo-autor.html ) por si tienes tiempo y te aptece echarle un ojo, puedes pasar por todas las imagenes del slide las que mas cosas llevan son la 2 y la 4.
    Saludos

    ResponderEliminar
    Respuestas
    1. Para poner este tipo de código en una página, el CSS debe ir entre etiquetas <style> y </style>

      Por otra parte, el HTML debe ir sin saltos de línea.

      A veces es complicado que estas cosas funcionen en entradas (o páginas) y si además incluyes más elementos y nuevo CSS, es fácil que entren en conflicto.

      Eliminar
  48. hola disculpa, las imagenes me salen muy chicas, podrias ayudarme?

    ResponderEliminar
  49. Hola. Si me dices la página dónde tienes puesto el slider quizás pueda.

    ResponderEliminar
  50. Hola. Sólo agradecer a Oloman la generosidad de compartir con todo el mundo sus conocimientos.
    Por si a alguien le interesa, y ya que he visto que algunas personas preguntaban por ello, he conseguido ampliar el slider a 15 imágenes (tal y como está planteado llegaría a 20, pero esto todavía no lo he probado). Un saludo.

    ResponderEliminar