Automatische Höhe auf einem vertikalen Swiper-Slider in Webflow mithilfe von Finsweet Components oder Swiper.JS zum Laufen bringen
Vertikale Schieberegler mit automatischer Höhe sind eines der Dinge, von denen sich das Internet einig ist, dass sie „nicht unterstützt“ werden.
Swiper-Dokumente sagen nein.
Finstweet sagt nein.
Die Foren sind voller Halblösungen, Hacks und leichter Verzweiflung.
Und doch — es tut arbeiten.
Wir sind bei einem kürzlich erschienenen Webflow-Build darauf gestoßen, der im Grunde genommen aus Schiebereglern besteht. Horizontale Wischer? Einfach. Die automatische Höhe funktioniert sofort. Vertikale Wischer? Eine andere Geschichte.
Der Trick besteht darin, zu verstehen, dass Swiper beim Layout extrem wählerisch ist.
Folgendes sorgt dafür, dass es tatsächlich funktioniert:
- Das Die Swiper-Liste und ihr Wrapper benötigen eine feste Höhe
- Jeder Folie muss angezeigt werden: Block (Flex macht es komplett kaputt)
- Der Folieninhalt benötigt height: auto mit min-height: fit-content
Das war's. Keine JavaScript-Hacks. Keine Beobachter zur Größenänderung. Keine seltsamen Tricks beim Duplizieren.
Sobald diese Regeln festgelegt sind, berechnet Swiper die Höhe korrekt neu, wenn sich die Folien ändern — auch wenn jede Folie sehr unterschiedliche Inhaltslängen hat.
Das obige Video zeigt die genaue Einrichtung einer Webflow-Komponente, einschließlich der Frage, wie Sie sie flexibel und wiederverwendbar halten können, ohne Inhalte fest zu codieren.
Manchmal sind die Dokumente falsch.
Manchmal besteht die Lösung darin, einfach zu verstehen, was der Browser eigentlich will.
Wenn du gerade gegen einen vertikalen Slider kämpfst — du bist nicht verrückt.
Sie brauchten nur einen kleinen Layoutschub in die richtige Richtung.
