Todos los complementos de carrusel que hayas eliminado venían con un controlador de ruedas, un polirelleno deslizante y opiniones sobre el impulso. El navegador ya lo posee todo; el CSS solo tiene que decir dónde descansa el desplazador, lo cual es un muy buen uso de la plataforma.
.gallery {
display: grid;
grid-auto-flow: column;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.gallery > * { scroll-snap-align: center; }Elige la alineación
- start coloca cada tarjeta al ras del borde principal de la galería, la elección correcta para anchos de tarjeta uniformes y un progreso de lectura visible.
- center hace que la tarjeta en reposo sea el ancla visual y maneja las tarjetas más anchas que la ventana gráfica con más elegancia.
- obligatoriamente obliga a una posición de descanso después de cada gesto, justo para cubiertas fijas; la proximidad simplemente ofrece uno, que es más amable con el contenido de ancho mixto.
Lo que te ofrece el navegador
El impulso, el deslizamiento táctil y la inercia del trackpad provienen del propio overflow-x. Los usuarios del teclado llegan a cada tarjeta con una pestaña y el cursor se mueve para mantener el foco visible. El relleno de desplazamiento en el contenedor reserva espacio en el punto de ajuste, por lo que un encabezado adhesivo nunca se traga los píxeles superiores de una tarjeta en reposo.
Dos configuraciones llevan el pulido: desplazamiento-snap-stop: siempre evita que un movimiento rápido pase de tres productos a la página cuatro, y un bloque de movimiento reducido prefiere puede relajar una plataforma obligatoria para la proximidad. Un carrusel breve, elaborado íntegramente a partir de declaraciones que puedes leer en voz alta a un diseñador.