Muchas veces en nuestras vidas como desarrolladores web nos hemos encontrado con la necesidad de tener que usar un "slider" o carrusel de elementos. Este es uno de los problemas más recurrentes de nuestra profesión. En mi caso siempre he acabado utilizando librerías JavaScript, incluso con dependencias de jQuery, que se basan en cálculos sobre el DOM. Si haces una búsqueda en Google verás que tiene más de un millón de resultados. ¡Pues bien!, ahora con simplemente con CSS podrás crear un carrusel sin necesidad de usar ninguna de esas librerías de terceros, ni tener que usar JavaScript para tal fin.

El truco es una propiedad llamada CSS Scroll Snap, esta permite declarar posiciones de nuestro scroll de forma que podamos controlarlo mejor. Esto antes lo conseguíamos usando JavaScript sobre los elementos del DOM. Como la web ha ido evolucionando para adaptarse a los móviles, la experiencia a la hora de hacer scroll se ha convertido en vital por la falta de espacio.

Este Scroll Snap te va a permitir generar puntos de ajuste para el inicio, centro y final de los elementos, y así poder generar el efecto de carrusel. Para ello, vamos a explicarte cada una de las propiedades que tiene este Scroll Snap para que puedas entender mejor el ejemplo que te mostraremos más adelante.

Propiedad CSS scroll-snap-type

La primera propiedad que debes conocer es scroll-snap-type, esta se aplica en nuestro contenedor donde vamos a querer controlar el scroll. Vamos a tener que indicarle dos parámetros:

El primero sería si queremos controlar el scroll en una dirección u otra.

• none: Cuando se hace scroll en el contenedor, se ignoran los puntos de ajuste.
• x: Puntos de ajuste son horizontales.
• y: Puntos de ajuste son verticales.
• both: Puntos de ajuste son tanto horizontales como verticales.

El segundo parámetro determina si el viewport de nuestro contenido se debe ajustar a los elementos de forma obligatoria o solo si está muy próximo de sus bordes.

• mandatory: Al terminar de hacer scroll, el scroll se mueve automáticamente SIEMPRE al punto de ajuste que se haya determinado.
• proximity: Al terminar de hacer scroll, el scroll se mueve automáticamente SOLO cuando el scroll esté muy próximo al punto de ajuste que se haya determinado.

Para nuestro propósito de crear un carrusel, lo ideal sería usar lo siguiente:

.slider-container {
  scroll-snap-type: x mandatory;
}

Propidad CSS scroll-snap-align

Otra propiedad a tener en cuenta es scroll-snap-align, esta propiedad se usa en cada uno de los elementos que tenemos en nuestro contenedor donde vamos a indicarle como va a alinearse este elemento en el viewport. Vamos a indicarle los siguientes parámetros:

El primer parámetro se refiere x, es decir, izquierda y derecha. Y el segundo se refiere a y, es decir, arriba y abajo (Funciona de manera similar a margin o padding). Si usamos un solo parámetro, este se referirá a todas las direcciones. Los parámetros aceptados son los siguientes:

• none: El elemento no tiene ningún punto de ajuste en su eje.
• start: El elemento tiene como punto de ajuste su inicio.
• end: El elemento tiene como punto de ajuste su final.
• center: El elemento tiene como punto de ajuste su centro.

En este caso el que nos interesa para crear nuestro carrusel es:

.slider-container img {
  scroll-snap-align: center;
}

Ahora que ya sabemos cómo funciona la propiedad scroll-snap. Vamos a ver un ejemplo de como crear nuestro carrusel con solo CSS

¿Cómo se hace? Ejemplo práctico de un carrusel de imágenes.

Con las dos propiedades que te he explicado vamos a crear paso a paso este esperado carrusel que te hemos prometido antes.

El primer paso es generar un HTML básico donde colocaremos un div con unas imágenes en el interior.

<div class="slider-container">  
  <img
    class="slider-item"
    src="https://images.unsplash.com/photo-1580501170961-bb0dbf63a6df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2970&q=80"
  />
  <img
    class="slider-item"
    src="https://images.unsplash.com/photo-1580501170888-80668882ca0c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
  />
  <img
    class="slider-item"
    src="https://images.unsplash.com/photo-1572508589584-94d778209dd9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
  />
</div>  

Esta estructura básica es la que vamos a necesitar para nuestro carrusel. Para simplificar vamos a hacerlo con imágenes, pero puedes hacerlo también con otros elementos HTML más complejos.

Para el ejemplo, vamos a estilar también este HTML con el siguiente CSS:

.slider-container {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow-x: scroll;
}

.slider-container img {
  flex: 0 0 100%;
  width: 100%;
  object-fit: cover;
}

Con esto conseguiremos que las imágenes estén alineadas de izquierda a derecha. Para ello usaremos display: flex en nuestro contenedor para que se alineen todos los elementos hijo. Además, vamos a decirle que ocupe el 100% de la pantalla usando el width: 100% y height: 100vh.

En el caso de las imágenes vamos a estirarlas usando flex: 0 0 100% y width: 100% para que estas ocupen el 100% del contenedor, y para que no nos queden con una relación de aspecto erróneo usaremos object-fit: cover.

Y por fin ahora es cuando viene la magia. Vamos a usar el scroll-snap de la siguiente forma:

.slider-container {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow-x: scroll

  /* Vamos a añadir esto 👇 */
  scroll-snap-type: x mandatory;
}

.slider-container img {
  flex: 0 0 100%;
  width: 100%;
  object-fit: cover;

  /* Vamos a añadir esto 👇 */
  scroll-snap-align: center;
}

Usaremos en el contenedor la propiedad scroll-snap-type: x mandatory;. Esto nos indicará que queremos capturar el scroll horizontal del contenedor y que es obligatorio que siempre, al dejar de hacer scroll, vaya a un punto de anclaje. De esta forma evitaremos que nuestro carrusel se quede en mitad de dos imágenes.

Y en las imágenes, usaremos la propiedad scroll-snap-align: center;. Esto le indicará que el punto de anclaje es el centro del elemento. Así, nuestras imágenes siempre quedarán alineadas.

Nota importante a tener en cuenta: Hay que usar este overflow-x: scroll en el contenedor de nuestro carrusel, ya que si no estaríamos haciendo scroll sobre el elemento <body> y no estamos capturando el scroll del elemento .slider.

Conclusiones

A día de hoy gran parte de los navegadores más usados lo soporta, exactamente un 92.3% en el caso de scroll-snap-type y un 91,15% en el caso de scroll-snap-align según "caniuse.com", es decir, esta es una buena opción si tenéis la necesidad de crear un carrusel sencillo, sobre todo si es para usarlo en aplicaciones móviles. Y en el caso de que un navegador no sea compatible, pues no pasa nada, simplemente haremos scroll de manera normal.

Como has podido ver con dos propiedades CSS podemos generar un carrusel funcional, un carrusel listo para usar.

¡Esperamos que os haya gustado! Síguenos en Twitter para estar al día de próximos posts.