So bringst du die automatische Höhe bei einem vertikalen Swiper-Slider in Webflow zum Laufen, mit Finsweet Components oder Swiper.js, drei einfachen Layout-Regeln und ohne JavaScript.
Vertikale Slider mit automatischer Höhe gehören zu den Dingen, bei denen sich das Internet einig ist: „wird nicht unterstützt“.
Die Swiper-Doku verrät nicht, wie es geht.
Finsweet sagt dazu, na ja, eher nein.
Die Foren sind voll von halben Lösungen, Hacks und leiser Verzweiflung.
Und doch: Es funktioniert.
Wir sind bei einem aktuellen Webflow-Projekt darauf gestoßen, das im Grunde nur aus Slidern besteht. Horizontale Swiper? Kein Problem. Die automatische Höhe funktioniert von Haus aus. Bei vertikalen Swipern sieht das anders aus.
Der Trick liegt darin zu verstehen, dass Swiper beim Layout extrem wählerisch ist.
Das sorgt tatsächlich dafür, dass es klappt:
- Die Swiper-Liste und ihr Wrapper brauchen eine feste Höhe
- Jeder Slide muss display: block haben (Flex bricht alles komplett)
- Der Slide-Inhalt braucht height: auto mit min-height: fit-content
Das war’s. Keine JavaScript-Hacks. Keine Resize-Observer. Keine seltsamen Duplizier-Tricks.
Sobald diese Regeln gesetzt sind, berechnet Swiper die Höhe beim Wechseln der Slides korrekt neu, selbst wenn jeder Slide unterschiedlich viel Inhalt hat.
Ein Haken: Die feste Höhe von Liste und Wrapper ist auf kleineren Bildschirmen etwas lästig, also prüfe deine Breakpoints.
Das Video oben zeigt die genaue Einrichtung in einer Webflow-Komponente, auch wie du sie flexibel und wiederverwendbar hältst, ohne Inhalte fest zu verdrahten. Es funktioniert genauso, egal ob dein vertikaler Slider aus der Finsweet-Components-Bibliothek stammt oder ob du Swiper.js von Hand einrichtest.
Manchmal sagt die Doku einfach nichts dazu.
Manchmal besteht die Lösung darin zu verstehen, was der Browser eigentlich will.
Wenn du gerade mit einem vertikalen Slider kämpfst: Du bist nicht verrückt.
Dir fehlte nur ein kleiner Layout-Impuls in die richtige Richtung.
Slider sind schon im besten Fall ein Fass ohne Boden. Wenn du eigene Slider-Steuerungen baust, wirf einen Blick auf unseren Beitrag über individuelle Slider-Steuerungen in Webflow. Wenn sich die Bewegung richtig anfühlen soll, hilft dir unser visueller Leitfaden zu Easing-Funktionen in Webflow, und wenn das Layout mit dem Bildschirm skalieren soll, haben wir außerdem über Schriftgrößen, die sich an Breite und Höhe des Viewports anpassen, geschrieben. Du baust eine Komponente, die du wiederverwenden möchtest? Wirf einen Blick auf unsere Webflow-Cloneables.
Vertikaler Slider mit automatischer Höhe: Kurzantworten
Kann ein vertikaler Swiper-Slider eine automatische Höhe haben?
Ja. Die Swiper-Doku beschreibt die automatische Höhe nur allgemein, aber bei einem vertikalen Slider funktioniert sie, sobald die Swiper-Liste und ihr Wrapper eine feste Höhe haben, jeder Slide auf display: block gesetzt ist und der Slide-Inhalt height: auto mit min-height: fit-content nutzt.
Warum bricht display: flex die automatische Höhe bei einem vertikalen Slider?
Bei unseren Tests konnte Swiper die Slide-Höhe nicht berechnen, wenn der Slide selbst ein Flex-Container war. Mit display: block funktionierte es. Auch Höhenwerte wie max-content klappten bei uns nicht, bleib also bei height: auto und min-height: fit-content.
Funktioniert das mit der Finsweet-Slider-Komponente?
Bei unserem Projekt ja, dort waren die Slider Finsweet Components auf Basis von Swiper.js. Dieselben drei Regeln gelten, wenn du Swiper.js selbst in Webflow einrichtest.
