Implementando un carousel con CSS Scroll Snap

Clase 15 de 21 • Diseño web con PostCSS, el futuro de CSS

Clase anteriorSiguiente clase

Resumen

Anteriormente, implementar un carrusel, implicaba el uso de librerías de terceros y inclusive código JavaScript. Ahora gracias a Scroll Snap, podemos disponer de esta funcionalidad usando CSS nativo: 


https://www.w3.org/TR/css-scroll-snap-1/


Entonces, cada artículo que teníamos separado uno seguido del otro, se volverá un elemento de nuestro carrusel. 


Mediante la clase .u-scrollContainer, usaremos las 2 propiedades particulares para el carrusel: scroll-snap-points-x: repeat(100%) y   scroll-snap-type: mandatory;


.u-scrollContainer {
width: 100%;
overflow: auto;
white-space: nowrap;
margin-bottom: 20px;
font-size:0;
scroll-snap-points-x: repeat(100%);
scroll-snap-type: mandatory;
}