Cómo hacer que la altura automática funcione en un control deslizante vertical en Webflow usando Finsweet Components o Swiper.JS
Los controles deslizantes verticales con altura automática son una de esas cosas que Internet acepta colectivamente que «no son compatibles».
Los documentos de Swiper dicen que no.
Fineweet dice que no.
Los foros están llenos de soluciones a medias, trucos y una leve desesperación.
Y, sin embargo, eso hace trabajar.
Lo encontramos en una versión reciente de Webflow que básicamente tiene controles deslizantes hacia abajo. ¿Deslizadores horizontales? Fácil. La altura automática funciona nada más sacarla de la caja. ¿Deslizadores verticales? Una historia diferente.
El truco es entender que Swiper es extremadamente exigente con el diseño.
Esto es lo que realmente hace que funcione:
- El La lista de deslizadores y su envoltorio necesitan una altura fija
- Cada la diapositiva debe mostrarse: bloque (flex lo rompe por completo)
- El contenido de la diapositiva necesita altura: automática con altura mínima: fit-content
Eso es todo. Sin trucos de JavaScript. No se permite cambiar el tamaño de los observadores. Sin trucos de duplicación extraños.
Una vez que esas reglas estén en vigor, Swiper recalcula la altura correctamente a medida que cambian las diapositivas, incluso cuando cada diapositiva tiene una longitud de contenido muy diferente.
El vídeo de arriba explica la configuración exacta de un componente de Webflow, incluida la forma de mantenerlo flexible y reutilizable sin necesidad de codificar contenido.
A veces los médicos se equivocan.
A veces, la solución es simplemente entender lo que el navegador realmente quiere.
Si estás luchando contra un deslizador vertical en este momento, no estás loco.
Solo necesitabas un pequeño empujón de diseño en la dirección correcta.
