Muchas veces nos vemos con la necesidad de ocupar un "slider" o carrusel de elementos.
¡Ahora con un simplemente con CSS puedes crear un carrusel! sin necesidad de utilizar 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.

A continuación te mostramos más a detalle las propiedades que tiene Scroll Snap.

CSS scroll-snap-type

Esta es la primera propiedad que debes conocer, esta se debe aplicar en nuestro contenedor donde vamos a querer controlar el scroll. Tendremos que indicarle dos parametros:

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.

Lo ideal sería así:

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

CSS 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.

Para ello tenemos que indicarle los siguientes parametros:

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.

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

¿Cómo se hace el slide?

Ahora que ya sabemos como funciona la propiedad scroll-snap.

A continuación te mostramos un ejemplo practico y sencillo de un carrusel de imágenes.

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>

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.

Y a continuación viene la magia. Vamos a ver 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;
}

scroll-snap-align: center Así lograremos que nuestras imágenes siempre queden alineadas.

scroll-snap-type: x mandatory; evitaremos que nuestro carrusel se quede en mitad de dos imágenes.

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.

(Visited 9.388 times, 8 visits today)