/* Contenedor del slider */
.track {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory; /* ← clave */
scroll-behavior: smooth;
scrollbar-width: none; /* ocultar scrollbar */
}
/* Cada slide */
.slide {
flex: 0 0 100%; /* ocupa el 100% del track */
scroll-snap-align: start; /* ← se ancla al inicio */
}
¿Cómo funciona? El contenedor tiene
overflow-x: scroll y scroll-snap-type: x mandatory. Cada slide tiene flex: 0 0 100% para ocupar todo el ancho, y scroll-snap-align: start para que el navegador lo encaje automáticamente. El swipe táctil funciona de forma nativa sin ningún JS. Solo se usa JS para los botones de flecha (que hacen scrollLeft) y para los dots.