Getting auto-height working on a vertical Swiper slider in Webflow using Finsweet Components or Swiper.JS
Vertical sliders with auto-height are one of those things the internet collectively agrees are “not supported”.
Swiper docs say no.
Finsweet says no.
Forums are full of half-solutions, hacks, and mild despair.
And yet — it does work.
We hit this on a recent Webflow build that’s basically sliders all the way down. Horizontal swipers? Easy. Auto-height works out of the box. Vertical swipers? Different story.
The trick is understanding that Swiper is extremely picky about layout.
Here’s what actually makes it work:
- The swiper list and its wrapper need a fixed height
- Each slide must be display: block (flex breaks it completely)
- The slide content needs height: auto with min-height: fit-content
That’s it. No JavaScript hacks. No resize observers. No weird duplication tricks.
Once those rules are in place, Swiper recalculates height correctly as slides change — even when each slide has wildly different content lengths.
The video above walks through the exact setup inside a Webflow component, including how to keep it flexible and reusable without hard-coding content.
Sometimes the docs are wrong.
Sometimes the solution is just understanding what the browser actually wants.
If you’re fighting a vertical slider right now — you’re not crazy.
You just needed one small layout nudge in the right direction.
