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:

   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:

Ejemplo disponible solo en Chrome y Safari

Recibe notificaciones por correo