Webflow Slider erstellen: Einrichtung, CMS & Finsweet Guide (2026)

Der native Slider von Webflow ist eine dieser Komponenten, die oberflächlich betrachtet einfach wirken, aber bei der Arbeit an echten Projekten eine enorme Tiefe bieten. In diesem Tutorial führe ich dich durch alles – von den Grundlagen der Einrichtung Ihres ersten Sliders bis hin zur Verknüpfung mit CMS-Inhalten, damit du diese zentral für deine gesamte Website verwalten kannst.

Ich habe Webflow-Slider bereits in Dutzenden Kundenprojekten eingesetzt. Die statische Version ist in wenigen Minuten eingerichtet. Die CMS-gestützte Variante mit Finsweet Attributes erfordert etwas mehr Vorbereitung, bietet dafür aber eine Flexibilität, die ohne umfangreichen eigenen Code kaum zu erreichen ist.

So funktioniert die Slider-Komponente von Webflow

Bevor du beginnst, ist es hilfreich zu verstehen, womit du eigentlich arbeitest. Ein Webflow-Slider besteht aus vier Hauptelementen:

• ‍Slider-Container: Die äußere Hülle, die alles zusammenhält
• ‍Slider-Maske: Steuert, was zu einem bestimmten Zeitpunkt sichtbar ist – dies ist der Bereich, den du für Ansichten mit mehreren Slides anpasst‍
• Slides: Die einzelnen Inhaltsbereiche innerhalb der Maske‍
• Navigationselemente: Pfeile und Navigationspunkte, die beide vollständig gestaltbar sind

Um einen Slider hinzuzufügen, öffne das Panel "Elemente hinzufügen" (CMD+E), suche nach “Slider” und ziehe ihn auf deine Arbeitsfläche. Webflow platziert die Komponente standardmäßig mit zwei Slides und einer Pfeilnavigation.

Wichtige Slider-Einstellungen

Sobald sich dein Slider auf der Arbeitsfläche befindet, wähle das äußere Slider-Element aus und öffne das Einstellungs-Panel. Hier siehst du, was die einzelnen Optionen bewirken:

• Animation: Slide bewegt Folien horizontal. Fade blendet sie ineinander über. Bei Testimonial-Slidern wirkt Fade meist sauberer.
• Endlosschleife: Lässt den Slider kontinuierlich laufen, ohne bei der letzten Folie anzuhalten. Fast immer empfehlenswert.
• Autoplay: Lässt Folien automatisch weiterlaufen. Stell eine Verzögerung von mindestens 5000 ms ein, damit Nutzer den Inhalt auch lesen können.
• Wischen deaktivieren: Deaktiviere dies für Touch-Geräte nur, wenn dein Slider Konflikte mit horizontalem Scrollen verursacht. Andernfalls lass es aktiviert.
• Pfeile und Punkte: Beide können einzeln über das Einstellungs-Panel ausgeblendet oder über den Navigator gestaltet werden.

Multi-Slide-Ansicht und responsive Anpassungen

Eine der häufigsten Slider-Konfigurationen ist die Anzeige mehrerer Folien gleichzeitig – zum Beispiel 3 auf dem Desktop, 2 auf dem Tablet, 1 auf dem Smartphone.

So gehst du vor:

1. Wähle die Slider-Maske aus (nicht den äußeren Slider-Container)
2. Setz die Breite auf dem Desktop auf 33,33 % für ein 3er-Layout
3. Ändere den Wert auf dem Tablet auf 50 % und auf dem Smartphone auf 100 %
4. Stell sicher, dass der Überlauf (Overflow) des Slider-Containers auf "hidden" gesetzt ist

Die Folien selbst füllen die Maske aus. Dieser Ansatz hält alles innerhalb von nativem Webflow, ohne dass benutzerdefinierte Code-Tricks erforderlich sind.

Lösung: Einheitliche Höhe für alle Folien

Wenn deine Folien Inhalte unterschiedlicher Länge enthalten – was bei Testimonials oder Karten fast immer der Fall ist –, werden sie standardmäßig mit unterschiedlichen Höhen dargestellt. Das zerstört das Layout.

Behebe das mit zwei CSS-Regeln, die du im Embed-Element deiner Seite oder in den globalen Styles hinzufügen:

.w-slider-mask {

 display: flex;

 align-items: stretch;

}

.your-card-class {

 height: 100%;

}

Ersetze .your-card-class durch die Klasse, die du deinem Slide-Inhalt zugewiesen hast. Dadurch wird sichergestellt, dass alle Slides die Höhe des höchsten Elements übernehmen.

Statischer Slider vs. CMS-Slider vs. Swiper.js – Was solltest du wählen?

Bevor es weitergeht, lohnt es sich die Optionen genau ansehen:

CMS-Slider mit Finsweet Attributes – Schritt für Schritt

Hier machen die meisten Anleitungen Fehler, daher habe ich ein vollständiges Tutorial dazu erstellt. Hier ist das korrekte Setup für 2026.

Warum einen CMS-basierten Slider verwenden?

Wenn du einen Testimonial-Slider auf mehreren Seiten hast und ein Kunde seine Berufsbezeichnung ändert, müsstest du normalerweise jeden Slider einzeln aktualisieren. Mit einem CMS-basierten Slider nimmst du die Änderung einmal im CMS vor und sie wird sofort überall übernommen. Dasselbe gilt für Fallstudien-Karussells, Team-Slider oder andere wiederkehrende Inhalte.

Ich habe eine vollständige Anleitung für genau dieses Setup aufgenommen – so kannst du am effizientesten folgen:

Schritt 1: Deine CMS-Collection einrichten

Erstelle eine neue CMS-Collection namens "Testimonials" (oder was auch immer zu deinem Inhalt passt). Füge die benötigten Felder hinzu:

• Name (Nur Text)
• Position & Unternehmen (Nur Text)
• Zitat (Nur Text oder Rich Text)
• Porträtbild (Bild)
• Reihenfolge (Zahl) – zur Steuerung der Folienabfolge
• Tag (Referenz oder Multireferenz) – optional, für seitenspezifische Filterung

Füge mindestens 3-4 Einträge hinzu, damit du den Slider ordnungsgemäß testen kannst.

Schritt 2: Zuerst den statischen Slider erstellen

Falls du noch keinen Slider hast, Erstelle zuerst einen mit statischem Inhalt, indem du die Schritte im ersten Teil dieser Anleitung befolgst. Gestalte deine Slide-Card genau so, wie sie aussehen soll – dies dient als Vorlage, die Finsweet mit deinen CMS-Daten befüllt.

Schritt 3: CMS-Collection-Liste zur Seite hinzufügen

Platziere eine CMS-Collection-Liste an einer beliebigen Stelle auf der Seite. Sie kann ausgeblendet oder außerhalb des sichtbaren Bereichs positioniert werden – sie muss lediglich im DOM vorhanden sein. Verbinde sie mit deiner Testimonials-Collection. Füge innerhalb des Listenelements eine Kopie deiner Testimonial-Card ein und verknüpfe jedes Feld mit den entsprechenden CMS-Daten (Zitat, Name, Bild).

Schritt 4: Das Finsweet-Skript hinzufügen

Füge das folgende Skript in deine Seiteneinstellungen > Benutzerdefinierter Code > Head ein (oder seitenweit, falls du diesen Slider auf mehreren Seiten verwendest):

<script defer src="https://cdn.finsweet.com/attributes/cms-slider-1.js"></script>

Die Verwendung von "defer" verhindert, dass das Skript das Laden deiner Seite blockiert – wichtig für die Core Web Vitals.

Schritt 5: Die Attribute hinzufügen

Zwei Attribute sagen Finsweet, was zu tun ist:

• Auf der CMS Collection List: füge das Attribut fs-cmsslider-element = list hinzu
• Auf dem Slider-Element: füge das Attribut fs-cmsslider-element = slider hinzu

Beide müssen sich auf derselben Seite befinden. Veröffentliche und teste – Finsweet lädt die CMS-Inhalte automatisch in deinen Slider.

Schritt 6: Reihenfolge und Filterung steuern

So steuerst du die Reihenfolge der Slides: Füge deinem CMS ein Zahlenfeld namens "Order" hinzu. Vergib Werte in 5er-Schritten (5, 10, 15…), damit du neue Elemente zwischen bestehende einfügen kannst, ohne alles neu nummerieren zu müssen. Füge in den Einstellungen deiner Collection List eine Sortierregel für dieses Feld hinzu.

So filterst du nach Seite: Füge ein Multi-Reference-Feld hinzu, das Testimonials mit bestimmten Seiten oder Kategorien verknüpft. Verwende in deiner Collection List die nativen Filteroptionen von Webflow, um nur die Testimonials anzuzeigen, die für die jeweilige Seite markiert sind. Jede Seite zeigt dann eine andere Auswahl an Slides aus derselben CMS-Collection.

Was ist neu im Jahr 2026

Seit Juli 2026 unterstützen Webflows Component Slots nun Collection Lists und Slider. Das bedeutet, du kannst eine wiederverwendbare Slider-Komponente erstellen und eine Collection List direkt in einen Slot einfügen – was CMS-Slider-Setups noch übersichtlicher macht, wenn du mit einem komponentenbasierten Designsystem arbeitest. Wenn du heute ein neues Projekt startest, lohnt es sich, deinen Slider von Anfang an innerhalb einer Komponente aufzubauen.