Einen Webflow CMS Slider erstellen

Webflow CMS Slider: Dynamischen Content in euren Slidern nutzen

Webflow bietet großartige Optionen, um beeindruckende Slider zu erstellen. Aber was, wenn ihr Content zentral steuern und automatisch auf mehreren Seiten aktualisieren wollt? Genau hier kommt der Webflow CMS Slider ins Spiel! In diesem Tutorial lernt ihr, wie ihr euren Slider mit CMS-Content verbindet und flexibel steuert.

Warum ein CMS-gestützter Slider?

Manuelle Updates sind zeitaufwändig und fehleranfällig, besonders wenn ihr denselben Slider mehrfach auf eurer Website nutzt. Ein klassisches Beispiel ist ein Testimonial-Slider: Ihr wollt die Position eines Kunden ändern, müsstet das aber in jedem einzelnen Slider-Element machen. Mit einem CMS-gestützten Slider ändert ihr Content einmal, und er wird überall aktualisiert.

Da Webflow keine nativen CMS-Slider bietet, gibt es zwei Lösungen:

1. Externe Slider-Libraries wie Swiper.js (braucht umfangreichen Custom Code).
2. Finsweet CMS Slider, eine externe Skript-Lösung, die sich nahtlos in bestehende Webflow-Slider integrieren lässt.

In diesem Tutorial nutzen wir die zweite Variante.

1. Euren Slider vorbereiten

Wenn ihr noch keinen Slider habt, erstellt zuerst einen Webflow-Slider mit statischem Content. Anleitung dazu findet ihr in unserem früheren Blogbeitrag: Webflow Slider 101.

Wenn ihr schon einen funktionierenden Slider habt, könnt ihr direkt zum nächsten Schritt gehen.

2. CMS-Collection einrichten

1. Erstellt eine CMS-Collection (z. B. "Testimonials").
2. Fügt relevante Felder hinzu:
   • Name
   • Position & Unternehmen
   • Portraitbild
   • Bewertung (optional)
   • Kategorie-Tag (optional, für unterschiedliche Seiten)
3. Erstellt ein paar Einträge, um den Slider zu befüllen.

3. Slider mit CMS-Collection verbinden

1. CMS-Collection-Liste hinzufügen
   • Platziert eine CMS Collection List auf der Seite (Position egal, muss aber sichtbar sein).
   • Verbindet sie mit eurer Testimonials-Collection.
2. Slider-Content aus dem CMS ziehen
   • Kopiert eine bestehende Testimonial-Card in den CMS-Listeneintrag.
   • Verbindet Texte, Bilder, und Sternebewertungen mit CMS-Daten.