Slider en css explicado desde cero

Slider en CSS sin javascript

Desde hace unos días he estado investigando cómo hacer un slider en css, y revisando y revisando webs y ejemplos, me he hecho una idea de por dónde comenzar. Me he dicho a mí mismo, ¿Por qué no hacer uno y explicárselo a mis lectores?

Creando un Slider en CSS

Vamos a empezar comentando el código HTML

See the Pen Slider CSS Right to Left by apu314 (@apu314) on CodePen.

En primer lugar nos encontramos con un div que tiene una clase slider-container, el cual va a hacer de contenedor de nuestro slider. Seguidamente nos encontramos con otro div con una clase slider. Este último va a ser nuestro slider, es decir, lo que se va a deslizar de un lado a otro. Dentro del div con la clase slider ya podemos ver que tenemos cada uno de los elementos de nuestro carrousel. Cada uno de ellos va a ser una etiqueta de tipo a y dentro de ella vamos a tener una etiqueta de tipo img, en la cual vamos a contener la imagen.

Comentamos el código CSS

 

See the Pen Slider CSS Right to Left by apu314 (@apu314) on CodePen.

Al body le damos un margin: 0; para quitarle los márgenes a nuestro documento html.

Al .slider-container le ponemos una propiedad overflow:hidden; para que lo que no quepa dentro de nuestro slider podamos taparlo y que no se vean ni siquierea las barras de scroll.

A la clase .slider le vamos a dar una posición relativa para que podamos mover el slider. Es importante darle un ancho igual al número de imágenes que vamos a tener en nuestro slider. En este caso yo le he puesto width: 400%;.

Llamamos también a la animación desde el .slider con animation: 10s mov--der-izq infinite; y le ponemos que la animación se ejecute con animation-play-state: running; (ojo esto ultimmo solo se pone si queremos luego ponerle que al hacer hover en el slider la animación se pare y cuando quitamos el ratón de encima la animación siga)

.slider:hover {animation-play-state: paused;} Lo usamos para que al hacer hover la animación se pare.

.slider a img { width: 25%; float: left; } Se usa para que todas las imágenes entren dentro de nuestro slider y no se nos quede descuadrado. Para ello tenemos que dividir 100 (que es el 100% del contenedor)  ente el número de imágenes que tenemos en nuestro carrousel, que en este caso son cuatro. 100/4 = 25. float: left; nos sirve para poner una imagen a la derecha de la otra y que no nos salgan una abajo de la otra.

Supuestamente este slider en css sólo muestra 3 imágenes, pero la verdad es que tiene 4 porque la última que le hemos puesto es la misma que la primera del carrousel. Esto se hace para que no haya un salto directamente desde la última imagen a la primera. Como se muestra en el ejemplo lo que conseguimos es crear un efecto de continuidad infinita.

Voy a pasar a explicar la animación, que es lo más complicado de todo esto.

Los porcentajes son el tiempo transcurrido en la duración total de la animación. En el cero le estamos diciendo que es donde empieza y lo que debe hacer (posición inicial), en el 33.333% le estoy diciendo que desde 0% hasta 33.333% no se mueva la imagen. En cambio, desde 33.333% hasta 38.333% le estoy diciendo que se mueva un 100% a la izquierda para que se vea la siguiente imagen. En el siguiente intervalo no la movemos y luego se vuelve a repetir pero con 200% y 300%.

DEMO de nuestro slider en css

See the Pen Slider CSS Right to Left by apu314 (@apu314) on CodePen.


Esto ha sido todo, espero que te haya sido de ayuda este tutorial de cómo crear un slider en css y sin javascript. Quiero ver comentarios con tus dudas y sugerencias.