Slider CSS sin Javascript y movimiento automático

Slider CSS sin Javascript con movimiento automático

Hace unas semanas, en un artículo del blog vimos cómo hacer un Slider CSS sin Javascript. En este artículo creábamos el típico slider con varios elementos y el uso de flechas para poder movernos entre un elemento y otro del carrusel gracias al uso de CSS avanzado y de inputs radio con una serie de label asociados.

Sin embargo, no siempre queremos un slider con flechas para que el usuario se pueda desplazar. Puede darse el caso de querer tener un slider, pero que éste se mueva automáticamente, sin que el usuario interactúe con él. Pues bien, eso también es posible con CSS!!

Si no te apetece leer, como siempre puedes ver el vídeo asociado en mi canal de youtube:

Punto de partida para nuestro Slider CSS sin javascript con movimiento automático

Vamos a utilizar como punto de partida, el resultado final del artículo «Slider CSS sin Javascript«, teniendo un fichero HTML y un CSS, por lo que si no has leído cómo conseguir hacer un Slider CSS sin utilizar Javascript, es muy recomendable que lo hagas 😉

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Slider CSS - A Slider only with CSS</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href="./style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="page">
            <section>
                <input type="radio" name="slider-select-element" id="element1" checked="checked" />
                <input type="radio" name="slider-select-element" id="element2" />
                <input type="radio" name="slider-select-element" id="element3" />
                
                <div id="slider-container">
                    <div id="slider-box">
                        <div class="slider-element">
                            <article class="element-red">
                                
                            </article>
                        </div>
                        <div class="slider-element">
                            <article class="element-green">
                                
                            </article>
                        </div>
                        <div class="slider-element">
                            <article class="element-blue">
                                
                            </article>                            
                        </div>
                    </div>
                </div>
                
                <div id="slider-arrows">
                    <label for="element1"></label>
                    <label for="element2"></label>
                    <label for="element3"></label>
                </div>
            </section>            
        </div>
    </body>
</html>

CSS

/* 
		Slider CSS
    Created on : 23-abr-2014, 18:28:01
    Author     : Rolando Caldas <rolando.caldas@gmail.com>
*/

* {
    box-sizing: border-box;
}

body {
    text-align: center;
}

input[name="slider-select-element"] {
    display: none;
}

#slider-arrows {
    margin: -10% auto 0 auto;
    width: 80%;
}

#slider-box {
    height: 100%;
    width: 300%;
}

#slider-container {
    height: 20%;
    margin: 0 auto;
    overflow: hidden;
    text-align: left;
    width: 80%;
}

.element-blue,
.element-green,
.element-red {
    min-height: 400px;
    max-height: 100%;
    width: 100%;
}

.element-blue {
    background: blue;
}

.element-green {
    background: green;
}

.element-red {
    background: red;
}

.slider-element {
    float: left;
    width: 33.333%;
}

#element1:checked ~ #slider-arrows label:nth-child(2),
#element2:checked ~ #slider-arrows label:nth-child(3),
#element3:checked ~ #slider-arrows label:nth-child(1) {
    display: block;
    float: right;
}

#element1:checked ~ #slider-arrows label:nth-child(3),
#element2:checked ~ #slider-arrows label:nth-child(1),
#element3:checked ~ #slider-arrows label:nth-child(2) {
    display: block;
    float: left;
}

#element1:checked ~ #slider-arrows label:nth-child(2):before,
#element2:checked ~ #slider-arrows label:nth-child(3):before,
#element3:checked ~ #slider-arrows label:nth-child(1):before {
    color: black;
    content: "\f054";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
}

#element1:checked ~ #slider-arrows label:nth-child(3):before,
#element2:checked ~ #slider-arrows label:nth-child(1):before,
#element3:checked ~ #slider-arrows label:nth-child(2):before {
    color: black;
    content: "\f053";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
}

#element1:checked ~ #slider-container #slider-box {
    margin-left: 0;
}

#element2:checked ~ #slider-container #slider-box {
    margin-left: -100%;
}

#element3:checked ~ #slider-container #slider-box {
    margin-left: -200%;
}

#slider-arrows label {
    color: transparent;
    cursor: pointer;
    display: none;
    font-size: 2rem;
    height: 20px;
    width: 20px;
}

#slider-box {
    -webkit-transition: all 0.75s ease;
    -moz-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    transition: all 0.75s ease;
}

Eliminando el código HTML sobrante de nuestro Slider CSS

Nuestro carrusel automático sólo con CSS no va a tener las flechas para que el usuario se mueva, así que no necesitamos ni los input radio ni los label asociados, por lo que tanto los tres input como la etiqueta #slider-arrows no son necesarias.

Tampoco necesitamos incluir el CSS de font awesome, porque no vamos a utilizar ningún icono (los utilizábamos para mostrar las flechas).

Así pues, nuestro HTML queda de la siguiente manera:

<!DOCTYPE html>
<!--
    Author: Rolando Caldas Sanchez
    Blog: http://rolandocaldas.com/
    Google+: https://plus.google.com/+RolandoCaldasSanchez
    Linkedin: http://www.linkedin.com/in/rolandocaldas
    Twitter: https://twitter.com/rolando_caldas

    This file is part of an article:
    http://rolandocaldas.com/html5/slider-css-sin-javascript-automatico 
-->
<html>
    <head>
        <title>Slider CSS - An automatic Slider only with CSS</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="./style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="page">
            <section>
                
                <div id="slider-container">
                    <div id="slider-box">
                        <div class="slider-element">
                            <article class="element-red">
                                
                            </article>
                        </div>
                        <div class="slider-element">
                            <article class="element-green">
                                
                            </article>
                        </div>
                        <div class="slider-element">
                            <article class="element-blue">
                                
                            </article>                            
                        </div>
                    </div>
                </div>
                
            </section>            
        </div>
    </body>
</html>

El código HTML resultante es super sencillo!

Eliminando el código CSS sobrante de nuestro Slider CSS

Al igual que nuestro código HTML necesitaba una limpieza, nuestro CSS también, puesto que utiliza reglas CSS asociadas a etiquetas HTML que ya no existen. Debemos eliminar todas las reglas que incluyan cualquier referencia a los input #element1, #element2, #element3 y sus label asociadas.

Por lo que nuestro CSS base será el siguiente:

/*
    Author: Rolando Caldas Sanchez
    Blog: http://rolandocaldas.com/
    Google+: https://plus.google.com/+RolandoCaldasSanchez
    Linkedin: http://www.linkedin.com/in/rolandocaldas
    Twitter: https://twitter.com/rolando_caldas

    This file is part of an article:
    http://rolandocaldas.com/html5/slider-css-sin-javascript-automatico 
*/

* {
    box-sizing: border-box;
}

body {
    text-align: center;
}

input[name="slider-select-element"] {
    display: none;
}

#slider-arrows {
    margin: -10% auto 0 auto;
    width: 80%;
}

#slider-box {

    -webkit-transition: all 0.75s ease;
    -moz-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    transition: all 0.75s ease;

    height: 100%;
    width: 300%;
}

#slider-container {
    height: 20%;
    margin: 0 auto;
    overflow: hidden;
    text-align: left;
    width: 80%;
}

.element-blue,
.element-green,
.element-red {
    min-height: 400px;
    max-height: 100%;
    width: 100%;
}

.element-blue {
    background: blue;
}

.element-green {
    background: green;
}

.element-red {
    background: red;
}

.slider-element {
    float: left;
    width: 33.333%;
}

A pesar de la limpieza, debemos mantener en nuestra cabeza las siguientes reglas eliminadas, porque su contenido se utilizará más adelante:

#element1:checked ~ #slider-container #slider-box {
    margin-left: 0;
}

#element2:checked ~ #slider-container #slider-box {
    margin-left: -100%;
}

#element3:checked ~ #slider-container #slider-box {
    margin-left: -200%;
}

Cómo animar nuestro Slider CSS sin javascript

La pregunta del millón: Si no uso Javascript cómo **** hago para que esto se mueva. La respuesta es: animation.

CSS3 proporciona una propiedad maravillosa (como no) llamada animation. Esta propiedad permite crear animaciones en nuestras etiquetas HTML, alterando sus propiedades CSS durante un periodo de tiempo, pudiendo hacer que la animación se realice sólo una vez, dos, cuatro… e incluso de forma infinita!

Las animaciones en CSS3 requieren de una serie completa de artículos sólo para ellas solitas, así que me centraré en lo necesario para nuestro deseado efecto y me tomaré alguna licencia que otra 😉

Cómo crear una animación CSS3

El funcionamiento de la propiedad animation de CSS3

Cuando incluimos en una regla CSS la propiedad animation, le daremos una serie de valores:

  1. El nombre de la animación: En nuestro CSS debemos definir el comportamiento de la animación deseada y darle un nombre, que utilizaremos en la propiedad animation para que el navegador sepa qué debe hacer.
  2. Duración de la animación: El tiempo, en segundos, que transcurrirá desde el momento 0% de la animación hasta el 100%
  3. Repetición de la animación: Debemos decir que la animación se ejecutará sólo una vez, varias (cuantas exactamente) o si será una animación infinita.
  4. Tiempo dentro de la animación: Es posible indicar que la animación se ejecuta de forma lineal o que va más lenta al principio que al final, etc.

Hay más valores que pueden utilizarse, pero para nuestro caso no necesitaremos más. La lista entera se puede consultar, como no, en W3CSchools

Creando la animación en CSS3

Como acabamos de ver, la propiedad animation de CSS3 necesita que se indique el nombre de la animación que va a ejecutar… la duda es clara ¿qué nombre poner?

Nosotros somos los que tenemos que crear la animación, así que el nombre también es cosa nuestra. No es que tengamos una serie de animaciones preparadas para utilizar, lo que realmente estamos hablando es de crear una serie de reglas CSS que se aplicarán a la etiqueta indicada durante la duración de la animación.

Así que tenemos que crear nuestra animación. Para crearla utilizamos lo que se conoce como @keyframes. Su sintáxis es la misma que el de las media-queries y a grosso modo es lo mismo, puesto que dentro del @keyframe encapsulamos una serie de reglas CSS, con la salvedad de que en vez de ser reglas CSS asociadas a selectores, están asociados a un % de forma que cada regla CSS asociada a un % significa que cuando la animación en curso llegue a ese punto de la animación (al 30%, al 50%, al 75% de la duración de la animación) deberán cumplirse las propiedades/valores de CSS indicadas.

Un par de ejemplos de @keyframes serían:

@keyframes changeBackground {
    from {
        background: white;
    }

    to {
        background: black;
    }
}

@keyframes changeBackgroundPlus {
    0% {
        background: white;
    }

    25% {
        background: red;
    }

    50% {
        background: blue;
    }

    75% {
        background: green;
    }

    100% {
        background: black;
    }    
}

El primer @keyframe crea una animación llamada changeBackground que funcionará de la siguiente manera:

  • Al inicio de la animación, la etiqueta dónde se ejecuta la animación, tiene fondo blanco.
  • Al final de la animación, esta etiqueta tiene fondo negro.
  • Al no indicar % sino que poner from y to, el paso de blanco a negro se hará de forma progresiva y proporcional.

El segundo ejemplo, lo que hacemos es indicar que changeBackgroundPlus funcione de la siguiente manera:

  • Al inicio de la animación (0%) el fondo es blanco.
  • Cuando haya transcurrido el 25% de la animación, el fondo será rojo.
  • Cuando haya transcurrido el 50% de la animación, el fondo será azul.
  • Cuando haya transcurrido el 75% de la animación, el fondo será verde
  • Cuando haya transcurrido el 100% de la animación, el fondo será negro.

Asociando nuestras animaciones CSS3 a etiquetas de nuestro HTML

Ya sabemos cómo funciona la propiedad animation y hemos creado dos animaciones vía @keyframes… ¿qué nos falta? Asociarlas a algo!

Bueno, tenemos un HTML simple:

<!DOCTYPE html>
<!--
    Author: Rolando Caldas Sanchez
    Blog: http://rolandocaldas.com/
    Google+: https://plus.google.com/+RolandoCaldasSanchez
    Linkedin: http://www.linkedin.com/in/rolandocaldas
    Twitter: https://twitter.com/rolando_caldas

    This file is part of an article:
    http://rolandocaldas.com/html5/slider-css-sin-javascript-automatico
-->
<html>
    <head>
        <title>Simple example about CSS3 animations</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="./style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="page">
           <div id="firstAnimation">

	    </div>            
            <div id="secondAnimation">

            </div>
        </div>
    </body>
</html>

Y este es el CSS base asociado:

/*
    Author: Rolando Caldas Sanchez
    Blog: http://rolandocaldas.com/
    Google+: https://plus.google.com/+RolandoCaldasSanchez
    Linkedin: http://www.linkedin.com/in/rolandocaldas
    Twitter: https://twitter.com/rolando_caldas

    This file is part of an article:
    http://rolandocaldas.com/html5/slider-css-sin-javascript-automatico 
*/

* {
    box-sizing: border-box;
}

body {
    text-align: center;
}

div {
	background: #000;
	height: 200px;
	margin: 20px auto;
	width: 200px;

    	-webkit-transition: all 0.75s ease;
	-moz-transition: all 0.75s ease;
	-ms-transition: all 0.75s ease;
	-o-transition: all 0.75s ease;
	transition: all 0.75s ease;
}

Tal y como está nuestro CSS tenemos dos cuadrados negros, como podemos ver en:
http://rolandocaldas.com/ejemplos-blog/animacionesCSS3/indexStatic.html

Lo que nosotros queremos es que al final se vean los cuadrados negros, pero que tengamos el efecto de nuestro ejemplos, el primero pasará de blanco a negro y el segundo acabará en negro, pero pasará por el blanco, rojo, azul y verde.

Bien, para ello lo primero que hacemos es incluir nuestros @keyframes al CSS:

/*
    Author: Rolando Caldas Sanchez
    Blog: http://rolandocaldas.com/
    Google+: https://plus.google.com/+RolandoCaldasSanchez
    Linkedin: http://www.linkedin.com/in/rolandocaldas
    Twitter: https://twitter.com/rolando_caldas

    This file is part of an article:
    http://rolandocaldas.com/html5/slider-css-sin-javascript-automatico 
*/

* {
    box-sizing: border-box;
}

body {
    text-align: center;
}

div {
	background: #000;
	height: 200px;
	margin: 20px auto;
	width: 200px;

    	-webkit-transition: all 0.75s ease;
	-moz-transition: all 0.75s ease;
	-ms-transition: all 0.75s ease;
	-o-transition: all 0.75s ease;
	transition: all 0.75s ease;
}

@-moz-keyframes changeBackground {
    from {
        background: white;
    }

    to {
        background: black;
    }
}

@-webkit-keyframes changeBackground {
    from {
        background: white;
    }

    to {
        background: black;
    }
}

@keyframes changeBackground {
    from {
        background: white;
    }

    to {
        background: black;
    }
}

@-moz-keyframes changeBackgroundPlus {
    0% {
        background: white;
    }

    25% {
        background: red;
    }

    50% {
        background: blue;
    }

    75% {
        background: green;
    }

    100% {
        background: black;
    }
}

@-webkit-keyframes changeBackgroundPlus {
    0% {
        background: white;
    }

    25% {
        background: red;
    }

    50% {
        background: blue;
    }

    75% {
        background: green;
    }

    100% {
        background: black;
    }
}

@keyframes changeBackgroundPlus {
    0% {
        background: white;
    }

    25% {
        background: red;
    }

    50% {
        background: blue;
    }

    75% {
        background: green;
    }

    100% {
        background: black;
    }    
}

Hay que tener en cuenta que @keyframes es la notación CSS3 estándar, pero los navegadores lo han implementando utilizando sus prefijos propietarios, por eso nuestros @keyframes también se incluyen con los prefijos -webkit y -moz, para que funcione tanto en IE (10+, que implementa @keyframes) como en firefox (-moz) o en Safari, Chrome y Opera (-webkit).

Lo siguiente es asociar cada una de nuestras animaciones a su correspondiente div. La animación changeBackground la asociaremos al div #firstAnimation, y changeBackgroundPlus a #secondAnimation, por lo que incorporamos lo siguiente al CSS:

#firstAnimation {
    -moz-animation: changeBackground 5s 1 linear;
    -o-animation: changeBackground 5s 1 linear;
    -webkit-animation: changeBackground 5s 1 linear;
    animation: changeBackground 5s 1 linear;
}


#secondAnimation {
    -moz-animation: changeBackgroundPlus 5s 1 linear;
    -o-animation: changeBackgroundPlus 5s 1 linear;
    -webkit-animation: changeBackgroundPlus 5s 1 linear;
    animation: changeBackgroundPlus 5s 1 linear;
}

De forma que cada div le asociamos una animación, siendo ambas de una duración de 5 segundos y que se ejecutará sólo una vez.

El CSS final sería:

/*
    Author: Rolando Caldas Sanchez
    Blog: http://rolandocaldas.com/
    Google+: https://plus.google.com/+RolandoCaldasSanchez
    Linkedin: http://www.linkedin.com/in/rolandocaldas
    Twitter: https://twitter.com/rolando_caldas

    This file is part of an article:
    http://rolandocaldas.com/html5/slider-css-sin-javascript-automatico 
*/

* {
    box-sizing: border-box;
}

body {
    text-align: center;
}

div {
	background: #000;
	height: 200px;
	margin: 20px auto;
	width: 200px;

    	-webkit-transition: all 0.75s ease;
	-moz-transition: all 0.75s ease;
	-ms-transition: all 0.75s ease;
	-o-transition: all 0.75s ease;
	transition: all 0.75s ease;
}

#firstAnimation {
    -moz-animation: changeBackground 5s 1 linear;
    -o-animation: changeBackground 5s 1 linear;
    -webkit-animation: changeBackground 5s 1 linear;
    animation: changeBackground 5s 1 linear;
}


#secondAnimation {
    -moz-animation: changeBackgroundPlus 5s 1 linear;
    -o-animation: changeBackgroundPlus 5s 1 linear;
    -webkit-animation: changeBackgroundPlus 5s 1 linear;
    animation: changeBackgroundPlus 5s 1 linear;
}

@-moz-keyframes changeBackground {
    from {
        background: white;
    }

    to {
        background: black;
    }
}

@-webkit-keyframes changeBackground {
    from {
        background: white;
    }

    to {
        background: black;
    }
}

@keyframes changeBackground {
    from {
        background: white;
    }

    to {
        background: black;
    }
}

@-moz-keyframes changeBackgroundPlus {
    0% {
        background: white;
    }

    25% {
        background: red;
    }

    50% {
        background: blue;
    }

    75% {
        background: green;
    }

    100% {
        background: black;
    }
}

@-webkit-keyframes changeBackgroundPlus {
    0% {
        background: white;
    }

    25% {
        background: red;
    }

    50% {
        background: blue;
    }

    75% {
        background: green;
    }

    100% {
        background: black;
    }
}

@keyframes changeBackgroundPlus {
    0% {
        background: white;
    }

    25% {
        background: red;
    }

    50% {
        background: blue;
    }

    75% {
        background: green;
    }

    100% {
        background: black;
    }    
}

Y el resultado se puede ver en:

http://rolandocaldas.com/ejemplos-blog/animacionesCSS3/indexAnimation.html

Puede parecer un poco extraño, pero es realmente sencillo, ¿verdad? Bien, pues llega el momento de aplicar esta idea a nuestro carrusel.

Creando la animación para mover los elementos de nuestro Slider CSS con CSS3

Para lograr que cada diapositiva o elemento de nuestro slider se desplace automáticamente, utilizaremos los @keyframes para establecer su comportamiento.

Así pues, nuestro objetivo es crear una animación que realice por sí sola lo que lográbamos con las flechas de nuestro carrusel. Recordando cómo funcionaba nuestro Slider CSS manual, teníamos unas flechas que al ser pulsadas, modificaban el margin-left de nuestro #slider-box de forma que lográbamos desplazar las diapositivas del carrusel.

Nuestra animación debe lograr ese mismo objetivo, de forma que entre el momento 0% de la animación y el 100% de la misma, se vaya modificando el margin-left para que se vean todos los elementos del carrusel.

Nuestro @keyframe es el siguiente:

@keyframes autoSlider {
    0% {
        margin-left: 0;
    }

    30% {
        margin-left: 0;
    }

    35% {
        margin-left: -100%;
    }

    65% {
        margin-left: -100%;
    }

    70% {
        margin-left: -200%;
    }

    95% {
        margin-left: -200%;
    }

    100% {
        margin-left: 0;
    }
}

Expliquemos un poco el código de esta animación que hemos llamado autoSlider!

Lo primero que hacemos en la animación, es indicar el punto de partida, de forma que en el 0% de la animación, el margin-left es de 0 para que se vea así el primer elemento de la diapositiva.

La segunda regla, establece que al llegar al 30% de la animación, el margin-left siga siendo del 0%, de forma que establecemos que la primera diapositiva se verá durante el primer 30% de la animación. En otras palabras, si toda nuestra animación durase 10 segundos, con estas dos primeras reglas nos aseguramos que durante los 3 primeros segundos, el primer elemento del carrusel sea el que se esté mostrando por pantalla.

La tercera regla, indica que el margin-left pasa de 0 a -100px cuando la animación se encuentra en el 35% del su totalidad. Esto significa, que entre el 30% y el 35% se lleva a cabo la transición entre una diapositiva y otra, lo que es un 5%, que sería medio segundo si nuestra animación durase 10 segundos en total.

En la cuarta regla, indicamos que el margin-left sigue a -100px cuando estemos al 65% de la animación, de forma que estemos hablando de un 30% con el segundo elemento del carrusel visualizado, para que el tiempo sea el mismo que el de la primera diapositiva.

La quinta regla, al igual que la tercera, hace que se produzca una nueva transición entre las diapositivas, de forma que al 70% de la animación, el margin-left sea de -200px y, por lo tanto, se vea la tercera y última diapositiva.

La sexta y penúltima regla de nuestra animación, establece que al 95% de la animación, el margin-left se mantiene, por lo que seguimos viendo la última diapositiva de nuestro slider.

Por último, cuando llegue el 100% de la animación, establecemos el margin-left nuevamente a 0 para volver al punto inicial de nuestra animación.

Asociando nuestra animación al contenedor de Slider CSS

Ya tenemos nuestra animación realizada, el siguiente paso es asociar esta animación a un elemento concreto de nuestro documento HTML.

Para ello, utilizaremos la propiedad animation, dentro de la regla que se aplica a #slider-box

#slider-box {
    animation: autoSlider 15s infinite linear;

    -webkit-transition: all 0.75s ease;
    -moz-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    transition: all 0.75s ease;

    height: 100%;
    width: 300%;
}

Lo que hacemos con la propiedad animation, es indicar que a #slider-box le vamos a aplicar la animación llamada autoSlider que hemos definido vía @keyframes, indicando además que va a durar 15 segundos, que la animación no terminará nunca y que la duración de cada bucle de la animación es proporcional.

Es importante darse cuenta que la animación se realiza en modo bucle y que en cada ciclo dentro del bucle se produce el paso por las tres diapositivas, de forma que si queremos aumentar o disminuir la velocidad de nuestro carrusel, debemos modificar los 15 segundos poniendo el valor que nos interesa, estos 15 segundos significa que la animación tarda 15 segundos en mostrar las tres diapositivas y en volver al inicio.

Por último, agregamos a nuestro CSS las mismas declaraciones utilizando los prefijos propietarios para que esta animación funcione correctamente en chrome, firefox, opera y safari.

/*
    Author: Rolando Caldas Sanchez
    Blog: http://rolandocaldas.com/
    Google+: https://plus.google.com/+RolandoCaldasSanchez
    Linkedin: http://www.linkedin.com/in/rolandocaldas
    Twitter: https://twitter.com/rolando_caldas

    This file is part of an article:
    http://rolandocaldas.com/html5/slider-css-sin-javascript-automatico
*/

* {
    box-sizing: border-box;
}

body {
    text-align: center;
}

input[name="slider-select-element"] {
    display: none;
}

#slider-arrows {
    margin: -10% auto 0 auto;
    width: 80%;
}

#slider-box {
    -moz-animation: autoSlider 15s infinite linear;
    -o-animation: autoSlider 15s infinite linear;
    -webkit-animation: autoSlider 15s infinite linear;
    animation: autoSlider 15s infinite linear;

    -webkit-transition: all 0.75s ease;
    -moz-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    transition: all 0.75s ease;

    height: 100%;
    width: 300%;
}

#slider-container {
    height: 20%;
    margin: 0 auto;
    overflow: hidden;
    text-align: left;
    width: 80%;
}

.element-blue,
.element-green,
.element-red {
    min-height: 400px;
    max-height: 100%;
    width: 100%;
}

.element-blue {
    background: blue;
}

.element-green {
    background: green;
}

.element-red {
    background: red;
}

.slider-element {
    float: left;
    width: 33.333%;
}

@-moz-keyframes autoSlider {
    0% {
        margin-left: 0;
    }

    30% {
        margin-left: 0;
    }

    35% {
        margin-left: -100%;
    }

    65% {
        margin-left: -100%;
    }

    70% {
        margin-left: -200%;
    }

    95% {
        margin-left: -200%;
    }

    100% {
        margin-left: 0;
    }
}

@-webkit-keyframes autoSlider {
    0% {
        margin-left: 0;
    }

    30% {
        margin-left: 0;
    }

    35% {
        margin-left: -100%;
    }

    65% {
        margin-left: -100%;
    }

    70% {
        margin-left: -200%;
    }

    95% {
        margin-left: -200%;
    }

    100% {
        margin-left: 0;
    }
}

@keyframes autoSlider {
    0% {
        margin-left: 0;
    }

    30% {
        margin-left: 0;
    }

    35% {
        margin-left: -100%;
    }

    65% {
        margin-left: -100%;
    }

    70% {
        margin-left: -200%;
    }

    95% {
        margin-left: -200%;
    }

    100% {
        margin-left: 0;
    }
}

Ya sólo nos queda guardar los ficheros, subirlos a la red y comprobar lo bien que funciona!

http://rolandocaldas.com/ejemplos-blog/sliderCSS/automatic/

Recursos disponibles

Ejemplos animación CSS3:
http://rolandocaldas.com/ejemplos-blog/animacionesCSS3/

Demo Slider CSS automático:
http://rolandocaldas.com/ejemplos-blog/sliderCSS/automatic/

Código animación CSS3 en github:
https://github.com/rolando-caldas/CSS3-animations

Demo Slider CSS automático en github:
https://github.com/rolando-caldas/sliderCSS/tree/master/src/automatic

Video Slider CSS automático en mi canal de youtube:
https://youtu.be/ekogxqm7U-c

31 pensamientos en “Slider CSS sin Javascript y movimiento automático

      1. Estuve intentando hacerlo, pero los códigos se solapan. Prevalece solo una de las dos, que en este caso es la de transición Automática. Sabrás alguna solución para usar ambos efectos Rolando.caldas

  1. Estimado como logras combinar ambos efectos, llevo rato tratando de usar flechas + animacion y no hay caso. help!! esta increible tu ayuda gracias nuevamente.

  2. felicidades esta muy bien sencillo y explicado, quisiera saber como añadir las imagenes (background-image) enves de los colores, gracias

  3. MONTSERRAT CRISTINA MORATO GARCIA
    Responder

    ¿Hay alguna forma de agregar texto? tengo severos problemas para jalar texto e imagen; la imagen la jalo como background; pero no tengo ni la más remota idea de cómo hacer para que la imagen y el texto que lleva se vallan a la par; lo peor es que como es un ejercicio escolar no puedo usar java 🙁
    SOS URGENTE

  4. Amigo una consulta, de que manera podría combinar ambos efectos, es decir necesito un background estático, pasar de blanco, rojo, gris, luego desplazarme hacia la derecha (con el animation) asi mismo pasar tres colores, y desplazarme una vez mas, es posible combinar estas dos transiciones?

    gracias por tu aporte ayudas muchisimo

    1. amigo antes que nada pude resolver mi pregunta anterior, quiero que veas el uso que le di a tu código, dentro del código fuente como comentario te puse como referencia. Gracias por aportar soluciones de este tipo. me siento motivado a bloguear y compartir herramientas de este tipo que se que a mas de uno le ayudaran.

      saludos cordiales

        1. me parece un trabajo muy bueno francisco, yo quiero hacer algo parecido pero con unas fotos de ropa y quisiera saber como haces para que la no haya transcicion entre fotos y se cambie el color automaticamente gracias

  5. Todo excelente, pero mi problema es cuando coloco el texto, mi deseo es que el texto quede encima de la foto y que además se desplacen a la misma vez por que para cada foto hay un texto diferente.

  6. Este es mi código html:

    Juegos de la Amistad 2016 Manada Jorge Devos

    Juegos de la Amistad1 «2016

    Juegos de la Amistad1 «2016

  7. Hola! ante todo muchas gracias por el aporte está fantástico, estaba ya enfermando el html con librerías sobre librerías y eran un dolor de cabeza!, te consulto he podido agregarle imágenes y las flechas y hacerlo responsive y que funcione el auto-play, pero si anda con auto-play no me funciona las flechas 🙁 hay manera de combinar las dos cosas?

  8. Belén Rodríguez García
    Responder

    Muchas gracias por tus aportaciones. Muy interesantes, pero necesito poner un texto al lado y que este no se mueva. No sé si con la opción que cuentas sin javasript sería posible, porque al hacerlo, también se mueve el texto. Gracias

  9. A mi me funciona para agregar imágenes en lugar de colores esto:
    .element-blue {
    background-image: url(../images/hp.png); lugar donde se ubica la imagen
    background-repeat: no-repeat; indica que no se repita infinitamente la imagen
    background-position: center; la pone en posición centrada dentro del contenedor
    }

  10. Hola Rolando! me ha sido de mucha utilidad tu articulo! Logre Ponerle las imagenes pero cuando pongo mas de tres se me duplican debajo, como puedo hacer para que siga una sola linea y aparezcan detras?
    Muchisimas gracias!

Deja un comentario