Hasta hace muy poco, para crear un slider en nuestras páginas web, teníamos que recurrir a librerías JavaScript.
Pero con las nuevas propiedades de CSS ScrollSnap, esto no va a ser más necesario.
Vamos a ver cómo crear un slider con solo CSS.
Este es el slider que vamos a crear, con unas imágenes de osos panda.
El slider se podrá navegar utilizando el scroll de un trackpad y de forma táctil, y como veis, tiene una experiencia totalmente nativa.
Pero antes, vamos a repasar un poco el artículo que escribí el otro día en midudev.com.
Allí os explicaba que siempre se han necesitado librerías JavaScript para crear sliders, y que ahora, con un poco de CSS, podemos crear un slider sencillo, pero funcional.
Para hacerlo, utilizaremos la nueva propiedad llamada ScrollSnap, y nos permite declarar puntos de anclaje al hacer scroll.
Hay que tener cuidado porque hay una especificación antigua que algunos navegadores soportan.
La diferencia entre ambas es que la primera, que ya está descartada, se basaba en puntos, por lo que podías anclar el scroll a cualquier punto.
Y la verdad es que era muy potente, pero muy poco útil e intuitivo.
La nueva especificación, que es la que vamos a repasar, está basada en cajas, como flex, de forma que podremos anclar nuestro scroll al inicio, centro o final de un elemento.
Vamos a repasar las dos propiedades más importantes de esta nueva especificación.
Tenemos ScrollSnapType, que es la propiedad que usaremos en el contenedor de nuestros elementos, o dicho de otro modo, el contenedor que tiene el scroll.
Y le indicaremos qué scroll vamos a controlar, si el horizontal, el vertical, ambos o ninguno.
Además, podemos decirle si estos anclajes son obligatorios o sólo cuando el scroll se queda muy cerca del siguiente elemento.
Pero lo mejor es que lo veamos con una demostración.
En el de la izquierda usamos la propiedad Mandatory, y podemos ver que es obligatorio que siempre acabe en un anclaje,
por lo que nunca quedará entre dos elementos, mientras que el de la derecha usa Proximity.
Y puede quedar a mitad de scroll si no queda muy cerca del siguiente elemento.
Os recomiendo que visitéis el artículo y jugueteéis un poco para que sintáis la diferencia vosotros mismos.
Pero si hasta aquí os habéis hecho una buena idea, ya os podéis imaginar que para nuestro slider usaremos un ScrollSnapType del eje X, el horizontal,
y que será obligatorio que acabe en un elemento y no se quede a medias.
Ahora veamos la propiedad ScrollSnapAlign, que la tendremos que usar para los elementos que tengamos dentro del contenedor, en nuestro caso, las imágenes.
Podemos indicar con los valores si queremos que el punto de anclaje sea el principio, centro o final del elemento.
En esta demostración podemos ver, por ejemplo, que por más scroll que hagamos, el primer elemento siempre queda justo al principio,
por lo que su ScrollSnapAlign tiene el valor Start.
En nuestro caso, para el slider, querremos que nuestros elementos siempre queden en el centro, así que usaremos el valor Center.
Esta es la teoría, pero me imagino que debes estar esperando ver código, así que vamos a ello.
En este HTML tengo unas cuantas imágenes que he sacado de Unsplash, tengo cero líneas de JavaScript,
y ya tengo preparados los selectores para estilar los elementos porque, como podéis comprobar, ahora mismo no se ve nada bien.
Lo primero que vamos a hacer es crear un contenedor para las imágenes.
Para ello, creamos un Section con la clase Slider, y ya podemos empezar a escribir nuestro CSS.
Vamos a estrenar el contenedor utilizando un Display Flex.
Esto al menos hace que nuestros elementos aparezcan en horizontal y estén agrupados en cajas.
Ahora vamos a darle una anchura máxima al contenedor y una altura.
Como la anchura máxima es bastante grande, vamos a decirle que siempre use el 100% del width para evitar problemas en los dispositivos móviles.
Como veis, esto ya va tomando forma, aunque los pobres osos pandas se ven bastante horribles ahora mismo.
Así que vamos a arreglarlo.
Hacemos que las imágenes tomen el 100% del ancho del contenedor para que se ajusten a la caja.
Mucho mejor.
Aunque hay alguna imagen que tiene su relación de aspecto rota.
Lo podemos arreglar usando la propiedad ObjectFit y el valor Cover.
Así, la imagen cubrirá el espacio manteniendo el aspecto.
Aunque se pierde un pelín de información.
Ahora bien, estamos en un punto que hacemos que se vean todas las imágenes y no es lo que queremos.
Para eso, vamos a indicarle al contenedor que lo que sobra no lo pinte, sino que lo esconda y solo se puede acceder usando el scroll.
Ahora ya podemos navegar entre las imágenes usando el scroll y ahora entra la magia de ScrollSnaps para hacer que al hacer scroll, acabe siempre en una imagen.
Para ello, vamos a usar ScrollSnapsType y le decimos que vamos a querer controlar el scroll del eje horizontal y que es obligatorio que independientemente de donde termine, debe acabar en un anclaje.
Si hacemos scroll, vemos que por ahora no funciona.
Y es que todavía necesitamos usar la propiedad ScrollSnapsAlign e indicarle que cada imagen debe quedar en el centro.
Una vez añadidas las imágenes y probamos a hacer scroll, veremos que, al terminar, el scroll se adapta y hace que la imagen quede siempre en el centro.
Unas pocas líneas de código en CSS y ya tenemos un slider funcional.
Es verdad que la animación que se produce siempre es la de volver a la posición y no podemos hacer opacidades ni traslaciones extrañas.
Pero seguramente, para la gran mayoría de los casos, esto será suficiente para nuestras necesidades.
Vamos a añadir un par de líneas de código para dejar más bonito nuestro slider, con un poco de borde de radios y un poquito de sombra en la caja.
Este resultado es todavía más impresionante en mobile, ya que la experiencia resulta totalmente nativa.
Si vamos haciendo swipe a izquierda y derecha, vemos que el slider nos lleva cada elemento sin ningún tipo de problema, por más que intentemos romperlo.
Esa experiencia nativa de la que hablaba, por supuesto, se traduce en performance.
Al hacerlo todo por CSS, podemos comprobar que no tiene ningún tipo de retardo a la hora de mover las imágenes y que da una experiencia muy fluida al usuario.