Slider de imagenes CSS sin JS

Hoy os dejo un Slider muy simple que hace que una serie de imagenes giren desde un lado hacia otro, vamos, el típico carrusel de imagenes, pero con la particularidad de que no lleva ni una sola linea de Java Script, esta todo escrito en CSS3.

Os dejo el código SASS, y el CSS

SASS

#Slideshow{
overflow: hidden;

.box{
width: 300%;
animation: Slider 18s infinite;
img{
float: left;
}
}
}

@keyframes ‘Slider'{
0%{
left:0%;
}
33%{
left:-100%;
}
66%{
left:-200%;
}
100%{
left:0%;
}
}

#Slideshow {
overflow: hidden;
}
#Slideshow .box {
width: 300%;
-webkit-animation: Slider 18s infinite;
animation: Slider 18s infinite;
}
#Slideshow .box img {
float: left;
}
@-webkit-keyframes ‘Slider’ {
0% {
left: 0%;
}
33% {
left: -100%;
}
66% {
left: -200%;
}
100% {
left: 0%;
}
}
@keyframes ‘Slider’ {
0% {
left: 0%;
}
33% {
left: -100%;
}
66% {
left: -200%;
}
100% {
left: 0%;
}
}

HTML

Como podéis ver tengo una caja contenedora a la que llamo Slideshow, en ella oculto todo lo que le sobresalga con overflow: hidden
Seguido de eso, tengo otra caja que cuelga de la misma a la que le doy un ancho de 300% (100% * 3″ el numero de las imagenes»), dentro de esa caja tendré a todas las imagenes, a las cuales simplemente les doy un float: left, para que queden una al lado de la otra.

Después viene la «magia» a la caja que contiene las imagenes (box) le doy el siguiente código animation: Slider 18s infinite. En el llamo le asigno la animación llamada Slider, le digo que dure 18 segundos, y que el bucle sea infinito.

La animación Slider se declara con @keyframes ‘El_nombre_que_quieras’, y entre las llaves {} se declaran el comportamiento que quieres que tenga en cada momento, yo le digo que cuando empiece 0% que este totalmente a la izquierda, a un tercio del tiempo 33% que se desplace hacia la izquierda un 100% (el tamaño de una de las 3 imagenes) a 2 tercios del tiempo 66% que de desplace a la izquierda un 200%, y finalmente que vuelva al comienzo al terminar.

Así de sencillo, espero que os sirva de utilidad

PD: Solo funciona en IE del 10 en adelante, para versiones anteriores de IE por desgracia deberemos recurrir a JS, o… no darle soporte http://caniuse.com/#search=animation

Rogama Informática

Apasionado de la montaña, del SEO y la programación a partes iguales, llevo más de 20 años trabajando en distintos sectores, pero siempre enfocado a la web, si quieres saber más de mí, sigue el enlace.