☝️Scroll Snap, crea un slider sólo usando CSS 😱

Summary

Este vídeo explica cómo implementar sliders funcionales y fluidos utilizando exclusivamente propiedades CSS, eliminando la necesidad de librerías externas de JavaScript. A través de la propiedad 'scroll-snap', se logra un comportamiento de anclaje nativo que funciona perfectamente tanto en escritorio como en dispositivos móviles, mejorando notablemente el rendimiento y la experiencia de usuario.

Topics covered

• Evolución de los sliders
• Introducción a Scroll Snap
• Diferencias técnicas de especificaciones
• Propiedad Scroll Snap Type
• Configuración de Mandatory vs Proximity
• Implementación de Scroll Snap Align
• Adaptación con Object Fit

Transcript excerpt

hasta hace muy poco para crear un slider nuestras páginas web teníamos que recurrir a librerías ya la script pero con las nuevas propiedades de css scroll snap esto no va a ser más necesario vamos a ver como crear un slider con solo css [Música] 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 mi dude puntocom 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 scroll snap y nos permite declarar puntos de anclaje al hacer scroll hay que tener cuidado porque hay una especificación antigua que algunos n…