Slideshow con CSS

Muchas veces queremos hacer un slideshow, pero no queremos utilizar nada de scripts, esto nos trae 2 ventajas principales, una que la carga es mucho mas rápida y la otra que no necesitamos de algún script externo, sino que es algo que ya esta implementado e interpretado por el navegador, pero a su vez es una desventaja, puesto que hasta ahora no todos los navegadores soportan el CSS3 (por no decir safari y chrome), para crear un slide simplemente creamos un contenedor donde estarán las imágenes y llamamos a la propiedad que hace el efecto.

   Primero el CSS:
#imagenes {
width:320px;
height:240px;
position:relative;
overflow:hidden;
border:1px solid #888;
}

#imagenes a img {border:0;}

#imagenes img {
position:absolute;
left:-320px;
z-index:1;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:40s;
}

#imagenes img.imagen1 {left:0;}

@-webkit-keyframes slide1 {
0% {left:0;}
10% {left:0;}
11% {left:320px;}
100% {left:320px;}
}

@-webkit-keyframes slide2 {
0% {left:-320px;}
10% {left:-320px;}
11% {left:0;}
20% {left:0;}
21% {left:-320px;}
100% {left:-320px;}
}

@-webkit-keyframes slide3 {
0% {left:320px;}
20% {left:320px;}
21% {left:0;}
30% {left:0;}
31% {left:320px;}
100% {left:320px;}
}

#imagenes img.imagen1 {-webkit-animation-name: slide1;}
#imagenes img.imagen2 {-webkit-animation-name: slide2;}
#imagenes img.imagen3 {-webkit-animation-name: slide3;}
#imagenes:hover img { -webkit-animation-play-state: paused;}

   Donde "@-webkit-keyframes slideN" es donde definimos el efecto, es una propiedad del CSS3 que nos permite crear el slide, cada porcentaje significa el espacio que tendra al completar la transición, es decir que para el momento que lleve un X% de la imagen cargada se mostrara X tamaño de la misma, si queremos agregar mas imagenes los pasos son los mismo. Y "-webkit-animation-name" es quien carga el efecto al cambiar entre una imagen y otra.

   La parte importante es "hover img { -webkit-animation-play-state: paused;}" con la cual detenemos la animación cuando el mouse pasa sobre el slide. Y el HTML respectivo es:
imagen1 imagen2 imagen3

   Esto es lo básico, si queremos podemos crear un segundo contenedor para crear un marco y hacer que el efecto quede mas limpio, como resultado obtendriamos lo siguiente:

imagen1
imagen2
imagen3
imagen4
imagen5
imagen6
imagen7
imagen8
imagen9
imagen10
imagen11

Ejemplo disponible solo en Chrome y Safari



23 Comentarios

Escribir Comentario
Anónimo
AUTOR
17 de noviembre de 2011, 15:49 delete

wenasoo ehh; pero quisiera aprenderr como sehace paso por paso

Responder
avatar
17 de noviembre de 2011, 15:59 delete

Bueno, es básicamente CSS, por lo que haces referencia a clases, en este caso esta haciendo referencia a un "id" de un "div"....

Responder
avatar
Anónimo
AUTOR
4 de febrero de 2012, 22:10 delete

hola amigos, muy interesante la propuesta, me gustaría saber si se puede integrar con una base de datos para que roten las imágenes.

Responder
avatar
5 de febrero de 2012, 17:37 delete

Claro que se puede, solo debes cargar el campo "blob" o un string que contenga la ruta de dicha imagen y cargar una a una con un ciclo (for, while o do.while)... Saludos!

Responder
avatar
Anónimo
AUTOR
26 de marzo de 2012, 6:52 delete

Muy buenas, no me acaba de quedar claro cómo se pueden añadir más imágenes. Podrías explicar mejor el tema de los porcentajes y los valores del la propiedad "left"?

Gracias!!

Responder
avatar
26 de marzo de 2012, 8:02 delete

Ok, en el CSS esta es la línea para las imágenes:

#imagenes img.imagenX {-webkit-animation-name: slideX;}

Donde "X" es el número de la imágen, por ejemplo, si tienes 5 deberás colocar esta linea 5 veces aumentando la X por cada imágen.

En el HTML es esta:

img class="imagenX" src="direccion_de_la_imagen" alt="cualquier_que_quieras"

Donde "imagenX" hace referencia al CSS, igual que antes si tienes 5 debes ir incrementando este número.

Ahora, lo de los porcentajes y "left" son las propiedades, por ejemplo, al 21% el slide3 tendra un margén de -320px... Esto debes definirlo para cada clase, es decir, puedo tener 2 clases de slide aplicado a 10 imagenes, o 10 slide para cada una de las 10 imagenes....

Mas info aquí: CSS3 @Keyframes Rule

Responder
avatar
Anónimo
AUTOR
28 de marzo de 2012, 6:30 delete

Hola Carlitox,

Muchas gracias, ya lo he pillado jeje...

Pero tengo una última duda, en el ejemplo que tu das con tres imágenes a 40 segundos, a mí se me terminan a los 10 segundos y los 30 restantes se muestra una imagen en blanco.

Qué se puede hacer en este caso para que esa imagen blanca aparezca el menor tiempo posible o para que tarde el mismo tiempo en pasar las imágenes ( los 3 jpeg y la imagen blanca)?

Gracias de antemano!

Responder
avatar
28 de marzo de 2012, 7:53 delete

La línea de código "animation-duration" corresponde al tiempo que durara la transición, no el tiempo en que cambia de una imagen a otra, espero explicarme.....

Prueba cambiando ese valor a unos 3 o 5s, también puedes usar milisegundos (ms).... Saludos!

Responder
avatar
Anónimo
AUTOR
17 de abril de 2012, 3:45 delete

Hola Carlitox,

Soy el mismo de los últimos comentarios. Ya había resuelto mi duda hace unas semanas, y quise ponerlo aquí por si a alguien más le servía, pero se me fue el santo al cielo y se me olvidó.

Vale, el "animation-duration" se refiere a la duración total de la animación. En tu ejemplo pone 40, así que tardará 40 segundos en mostrar todas las imágenes.

Bien, ahora a por el maldito slide en blanco! Los porcentajes en el archivo css de cada uno de los slides, indican la posición de cada imagen dentro de la "línea temporal" que dura toda la animación.

"@-webkit-keyframes slide1 {
0% {left:0;}
10% {left:0;}
11% {left:320px;}
100% {left:320px;}
}

@-webkit-keyframes slide2 {
0% {left:-320px;}
10% {left:-320px;}
11% {left:0;}
20% {left:0;}
21% {left:-320px;}
100% {left:-320px;}
}

@-webkit-keyframes slide3 {
0% {left:320px;}
20% {left:320px;}
21% {left:0;}
30% {left:0;}
31% {left:320px;}
100% {left:320px;}
}"

El slide 1 se sitúa entre el 0 y el 10%. El slide 2 entre el 11 y el 20%. Y el slide 3 entre el 21 y el 30%. Entre el 30 y el 100% no hay ninguna imagen, por eso sale el slide en blanco.

Por último decir que el hecho de que los valores en este ejemplo se altrernen entre negativo y positivo (320 primero, luego -320 y luego 320 otra vez) se debe a que las animaciones del slide se sucedan de derecha a izquierda contínuamente.

Espero que se haya entendido!!

Responder
avatar
17 de abril de 2012, 9:36 delete

Muy buena la explicación, se entiende perfectamente =)

Responder
avatar
Anónimo
AUTOR
12 de julio de 2012, 23:59 delete

hola carlitox

gracias por publicar este código.
necesito de tu ayuda, como elimino el espacio en blanco que queda despues del slide3.

Responder
avatar
13 de julio de 2012, 9:35 delete

Sin problemas, pero pilla el código que esta en el comentario de arriba (#9), allí esta explicado el porque sale un cuadro blanco y como quitarlo.... Saludos!!

Responder
avatar
Anónimo
AUTOR
13 de julio de 2012, 11:36 delete

hola carlitox
soy el del 12 de julio 2012 2359
leí lo que me sugeriste después de leerlo varias veces para entenderlo hice los siguientes cambios y ya no me sale el espacio en blanco pero pierdo la transición de las imágenes.


@-webkit-keyframes slide1 {
0% {left:0;}
10% {left:0;}
11% {left:1000px;}
100% {left:1000px;}
}

@-webkit-keyframes slide2 {
0% {left:-1000px;}
10% {left:-1000px;}
11% {left:0;}
20% {left:0;}
21% {left:-1000px;}
100% {left:-1000px;}
}

@-webkit-keyframes slide3 {
0% {left:1000px;}
20% {left:1000px;}
21% {left:0;}
30% {left:0;}
31% {left:0;}
100% {left:0;}
}

Responder
avatar
14 de julio de 2012, 10:54 delete

Escribe to codigo html para ver como lo estructuras..... Así podemos comenzar a probar.

Responder
avatar
Anónimo
AUTOR
14 de julio de 2012, 12:43 delete

como introdusco el codigo html ya que no me lo permite el formulario

Responder
avatar
14 de julio de 2012, 13:26 delete

Utiliza esta herramienta y publica lo que te genere... http://www.blogcrowds.com/resources/parse_html.php/

Responder
avatar
Anónimo
AUTOR
14 de julio de 2012, 23:46 delete

Esto fue lo que me genero la herramienta.
Este es el html


</head>
<body style="background-color: transparent;">
<div id="imagenes"><a href="enlace1"><img class="imagen1" src="slidershow/slider2.png" alt="imagen1"></a>
<a href="enlace2"><img class="imagen2"
src="slidershow/TIKAMAYA.png" alt="imagen2"></a>
<a href="enlace3"><img class="imagen3"
src="slidershow/slider4.png" alt="imagen3"></a>
</div>
<body>
</body>
</html>

Responder
avatar
Anónimo
AUTOR
14 de julio de 2012, 23:53 delete

</head>
<body style="background-color: transparent;">
<div id="imagenes">
<a href="enlace1"><img class="imagen1"
src="slidershow/slider2.png" alt="imagen1"></a>
<a href="enlace2"><img class="imagen2"
src="slidershow/TIKAMAYA.png" alt="imagen2"></a>
<a href="enlace3"><img class="imagen3"
src="slidershow/slider4.png" alt="imagen3"></a>
</div>
<body>
</body>
</html>

Responder
avatar
16 de julio de 2012, 10:06 delete

Bueno, verás.... Tu HTML esta bien, el problema es el CSS que no defines el contenedor de imagenes en general, tampoco le dices que la clase "imagen1" esta asociada al "slide1" y así continuamente..... Prueba con este CSS y me comentas:

#imagenes {
width:320px;
height:240px;
position:relative;
overflow:hidden;
border:1px solid #888;
}

#imagenes a img {border:0;}

#imagenes img {
position:absolute;
left:-320px;
z-index:1;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:40s;
}

@-webkit-keyframes slide1 {
0% {left:0;}
10% {left:0;}
11% {left:1000px;}
100% {left:1000px;}
}

@-webkit-keyframes slide2 {
0% {left:-1000px;}
10% {left:-1000px;}
11% {left:0;}
20% {left:0;}
21% {left:-1000px;}
100% {left:-1000px;}
}

@-webkit-keyframes slide3 {
0% {left:1000px;}
20% {left:1000px;}
21% {left:0;}
30% {left:0;}
31% {left:0;}
100% {left:0;}
}

#imagenes img.imagen1 {-webkit-animation-name: slide1;}
#imagenes img.imagen2 {-webkit-animation-name: slide2;}
#imagenes img.imagen3 {-webkit-animation-name: slide3;}

Responder
avatar
Anónimo
AUTOR
5 de octubre de 2012, 12:45 delete

oye me podrias explicar como hiciste el menu como el que tienes en parte izquierda. espero que me puedas ayudar gracias.

Responder
avatar
5 de octubre de 2012, 13:52 delete

Hola.... Es una variante de varios menús, la verdad es que nadie me había preguntado eso antes, mas tarde estoy publicando como lograr el efecto.... Saludos!

Edito: ya lo he publicado en el blog, quí el enlace... http://carlitoxenlaweb.blogspot.com/2012/10/menu-lateral-flotante-con-jquery-y-css.html

Responder
avatar
Pablo Jiménez Marín
AUTOR
25 de octubre de 2012, 23:43 delete

Hola, primero agradecer por el código, no conocía ésta forma de animar en css, jugando con el asunto pude hacer algo parecido pero con la propiedad opacity dejo el código por si a alguien le interesa. Saludos

@charset "utf-8";
/* CSS Document */

#imagenes {
width:100%;
height:100%;
position:absolute;
position:fixed;
overflow:hidden;
border:0px solid #888;
z-index:-3;
}

#imagenes a img {border:0;}

#imagenes img {
position:absolute;
left:0px;
z-index:-3;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:60s;
}

#imagenes img.imagen1 {left:0;}

@-webkit-keyframes slide1 {
0% {opacity:1;}
16% {opacity:1;}
33% {opacity:0;}
49% {opacity:0;}
65% {opacity:0;}
80% {opacity:0;}
100% {opacity:1;}



}

@-webkit-keyframes slide2 {
0% {opacity:0;}
16% {opacity:0;}
33% {opacity:1;}
49% {opacity:1;}
65% {opacity:0;}
80% {opacity:0;}
100% {opacity:0;}
}

@-webkit-keyframes slide3 {
0% {opacity:0;}
16% {opacity:0;}
33% {opacity:0;}
49% {opacity:0;}
65% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}

#imagenes img.imagen1 {-webkit-animation-name: slide1;}
#imagenes img.imagen2 {-webkit-animation-name: slide2;}
#imagenes img.imagen3 {-webkit-animation-name: slide3;}
#imagenes:hover img { -webkit-animation-play-state:running;}

Responder
avatar
25 de octubre de 2012, 23:46 delete

Gracias por compartirlo, esa es la idea, experimentar y seguir probando nuevas formas de hacer las cosas.... Y es que no solo vale para eso, sino también colores, tamaños, fuentes, muchas posibilidades....

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión