Cómo lograr que la altura automática funcione en un slider vertical de Swiper en Webflow, con Finsweet Components o Swiper.js, con tres reglas de diseño sencillas y sin JavaScript.
Los sliders verticales con altura automática son una de esas cosas que internet da por “no compatibles”.
La documentación de Swiper no explica cómo.
Finsweet, más o menos, dice que no.
Los foros están llenos de soluciones a medias, trucos y desesperación moderada.
Y sin embargo, sí funciona.
Nos topamos con esto en un proyecto reciente de Webflow que es básicamente sliders de arriba abajo. ¿Swipers horizontales? Fáciles. La altura automática funciona de serie. ¿Swipers verticales? Otra historia.
La clave es entender que Swiper es extremadamente exigente con el diseño.
Esto es lo que de verdad lo hace funcionar:
- La lista del swiper y su contenedor (wrapper) necesitan una altura fija
- Cada slide debe ser display: block (flex lo rompe por completo)
- El contenido del slide necesita height: auto con min-height: fit-content
Eso es todo. Sin trucos de JavaScript. Sin resize observers. Sin extraños trucos de duplicación.
Una vez aplicadas esas reglas, Swiper recalcula la altura correctamente al cambiar de slide, incluso cuando cada slide tiene contenidos de longitudes muy distintas.
Una salvedad: esa altura fija en la lista y el wrapper es un poco molesta en pantallas pequeñas, así que revisa tus breakpoints.
El vídeo de arriba recorre la configuración exacta dentro de un componente de Webflow, incluido cómo mantenerlo flexible y reutilizable sin fijar el contenido. Funciona igual tanto si tu slider vertical viene de la biblioteca Finsweet Components como de Swiper.js configurado a mano.
A veces la documentación simplemente no lo dice.
A veces la solución consiste en entender qué quiere realmente el navegador.
Si ahora mismo estás peleándote con un slider vertical, no estás loco.
Solo te faltaba un pequeño empujón de diseño en la dirección correcta.
Los sliders son un pozo sin fondo incluso en el mejor de los casos. Si estás creando tus propios controles de slider, echa un vistazo a nuestro artículo sobre controles de slider personalizados en Webflow. Si quieres que el movimiento se sienta bien, nuestra guía visual de las funciones de easing de Webflow te ayudará, y si el diseño debe escalar con la pantalla, también escribimos sobre tamaños de fuente que se ajustan al ancho y al alto del viewport. ¿Estás creando un componente que quieres reutilizar? Échale un vistazo a nuestros cloneables de Webflow.
Altura automática en slider vertical: respuestas rápidas
¿Puede un slider vertical de Swiper tener altura automática?
Sí. La documentación de Swiper solo describe la altura automática en términos generales, pero funciona en un slider vertical cuando la lista del swiper y su wrapper tienen una altura fija, cada slide está configurado como display: block y el contenido del slide usa height: auto con min-height: fit-content.
¿Por qué display: flex rompe la altura automática en un slider vertical?
En nuestras pruebas, Swiper no podía calcular la altura del slide cuando el propio slide era un contenedor flex, y cambiar el slide a display: block lo solucionó. Valores de altura como max-content tampoco nos funcionaron, así que quédate con height: auto y min-height: fit-content.
¿Funciona con el componente de slider de Finsweet?
En nuestro proyecto sí, donde los sliders eran Finsweet Components construidos sobre Swiper.js. Las mismas tres reglas se aplican si configuras Swiper.js por tu cuenta en Webflow.
