Webflow Slider: Alle Möglichkeiten + CMS

09. Januar 2024
Webflow Slider
Webflow Slider

Slider oder Slideshows ermöglichen es, viele Informationen auf begrenztem Platz übersichtlich darzustellen. Nutzer, die sich für den Inhalt interessieren, können ihn ohne Platzverschwendung intensiver betrachten. Webflow hat eine eingebaute Slider-Funktion, die gut für einfache Layouts mit statischem Inhalt geeignet ist. Wenn du jedoch Webflows CMS-Funktionen nutzen möchtest oder komplexere Slider-Layouts erstellen willst, stößt diese Funktion an ihre Grenzen.

In diesem Beitrag stelle ich dir drei Webflow Slider Lösungen vor: Der native Webflow Slider, der Finsweet CMS Webflow Slider, und ein Slider, der auf der Swiper.js API basiert (auch mit CMS Funktionalität).

Hier ist das Webflow Projekt mit allen besprochenen Inhalten: Webflow Sliders*

Nativer Webflow Slider

Hast Du keine besonderen oder individuellen Wünsche an einen Slider und Du möchtest bei den Basics bleiben ist der native Webflow Slider die perfekte Wahl. Das Set-Up ist sehr schnell gemacht, man zieht den Slider einfach aus dem Element-Panel. Er kommt mit allen nötigen Funktionalitäten und reicht tatsächlich für viele Anwendungsfälle vollkommen aus.

Nativer Webflow Slider

So sieht der Basic Slider aus und besteht aus ‘Slider’, ‘Mask’ und den ‘ Slides’. Möchtest du neue Slides hinzufügen kannst Du einfach einen Slide nehmen und kopieren. Innerhalb diesen Slides platzierst du auch später deinen Content. Standardmäßig geht ein Slide über die komplette Breite des Sliders, dies kann aber individuell angepasst werden. Unten in der Mitte ist die Slider Navigation, diese kannst du in den Settings rechts anpassen und begrenzt stylen. Allgemein lassen sich verschiedene Slider-Einstellungen in den Settings vornehmen z. B. lässt sich die Animation des ‘Sliden’ ändern oder auf Autoplay umstellen.

Webflow Slider Einstellungen

Tutorial: Quadratische Slides

Viele und ich selbst auch finden quadratische Slides sehr ansprechend, deshalb hier ein kleines Tutorial, wie Du diese ohne viel Aufwand erschaffen kannst. Du setzt ‘Slide 1’ auf die gewünschte Breite z. B. 30 % und platzierst anschließend einen Div-Block innerhalb dieses Slides. Dieser soll die Width: 100% haben und auch das Padding Bottom soll auf 100% gesetzt werden. So hast du direkt einen quadratischen Div-Block, da das Padding immer so “hoch” ist wie der Div-Block breit ist.

Styling für quadratische Slides

Setze dann diesen Div-Block auf ‘position:relative’

Position Relative

Nehme daraufhin ein Bild (zumindest im meinem Fall ist das der Content den ich verwenden möchte). Setze diesen auf position:absolute und auf ‘Full’ - also alle vier Werte auf 0%. Darüberhinaus setzt du die Breite und Höhe auf 100%.

Gebe dem ‘Slide 1’ noch etwas Margin nach Rechts und schon haben wir einen quadratischen Slide. Kopiere diese beliebig oft.

Achte immer darauf, dass in dem Div-Block mit Padding Bottom 100% niemals ein statisches Element platziert ist, sondern nur Elemente mit position:absolute.

Slider mit quadratischen Slides

Finsweet CMS Webflow Slider

Der native Slider in Webflow besitzt keine CMS Funktionalität, weshalb wir dafür auf eine Finsweet Attributes Lösung zurückgreifen: Finsweet CMS Slider

Dieser besteht aus der Collection List, aus welchem die Inhalte gezogen werden und dem Slider, welcher die Inhalte darstellen wird.

Collection List für Finsweet CMS Slider
Slider für CMS Finsweet

Achte darauf dem Slider nochmal manuell die Höhe “Auto” zu geben, da dieser initial eine bestimmte Höhe von Webflow bekommt. So stellst du sicher, dass sich der Slider an deine Inhalte anpasst.

CMS Slider Set-Up

Füge diesen Code in den <head>-Bereich deiner Seite ein:

<!-- [Attributes by Finsweet] CMS Slider --><script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"></script>

Gebe anschließend der Collection List mit den Slider Inhalten das Attribut fs-cmsslider-element = list und dem Webflow Slider selbst fs-cmsslider-element = slider

Die Inhalte aus der Collection List sollten nun im Slider angezeigt werden. Bei Bedarf kannst du den Style der Elemente oder des Sliders nochmal anpassen.

Finsweet CMS Slider in Webflow funktionl

Slider in Webflow mit Swiper.js

Für mich persönliche die bevorzugte Variante, da sie viel Flexibilität und Möglichkeiten mit sich bringt. Das Set-Up ist etwas aufwendiger und man muss sich etwas mit den Ressourcen von Swiper.js beschäftigen, um das Potential auch wirklich ausnützen zu können.

Ein tiefer Einblick in Swiper.js wäre für diesen Blogbeitrag nicht sinnvoll, da einfach zu viel besprochen werden müsste - das Basic Set-Up ist aber kein Problem. Schau dir die Swiper.js Demos an, um einen Einblick in die Möglichkeiten zu bekommen.

Achtung: Wenn du Webflow Anfänger bist verwende auf jeden Fall erst einmal den nativen Slider.

Swiper.js Slider Set-Up in Webflow

Der Aufbau ist vom Prinzip gleich wie der native Webflow Slider, in dieser Variante bauen wir diesen aber selbst mit Div-Blöcken. Das erste Element ist ein Div-Block mit der Klasse ‘swiper’, in diesem wird sich ein weiterer Div-Block - der ‘swiper-wrapper’. Innerhalb diesem befinden sich dann mindestens ein ‘swiper-slide’ - in der Regel natürlich mehr.

Aufbau Swiper.js Slider

Der ‘swiper-wrapper’ sollte eine Flexbox mit den align:stretch und justify:start sein, um die Elemente horizontal auszurichten.

swiper-wrapper styles

Darüberhinaus gebe ich den ‘swiper-slides’ immer das Sizing ‘Dont grow or shrink’ und eine Breite von 100%.

swiper-slides styling

In der Theorie ist dieser Aufbau nicht immer notwendig, aber mit diesem konstanten Set-Up kann ich später Bugs besser identifizieren.

Jetzt steht das Basic Set-Up in Webflow, in den Slides kannst du jeden Content einpflegen, den du möchtest.

Kopiere den ‘swiper-slide’ noch mindestens einmal.

Swiper.js Slider Aufbau extended

Integration von Swiper.js in Webflow

Füge diesen Code in den <head>-Bereich der Seiten ein, die einen Slider verwenden:

<script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script>

Damit bekommen wir Zugriff auf die Swiper.js API.

Um einen Swiper.js Slider zu initalisieren verwende folgende Vorlage und füge ihn vor das <body>-Tag in Webflow ein.

<script>

var swiper = new Swiper(".swiper", {});

</script>

Dein Swiper sollte nun funktionieren und kannst diesen mit Maus hin- und her sliden.

Navigation des Sliders

Lass uns zum Abschluss noch eine kleine Navigation für unseren Swiper bauen:

Dazu fügen wir ein Div-Block unter den Swiper ein und geben diesem die Klasse ’swiper-pagination’. Wir machen ihn zur Flexbox und richten Justify und Align mittig aus. In diesem fügen wir einen weiteren Div-Block mit der Klasse ‘swiper-pagination-bullet’ hinzu. Dieser wird später als Navigation-Bullet von Swiper.js verwendet. Style ihn nach deinen eigenen Wünschen. Danach kopieren wir dieses Element und geben die Komboklasse ‘swiper-pagination-bullet-active’ - dieser Punkt wird als aktiver State verwendet. In der Regel ist dieser etwas dominater z. B. schwarz.

Komboklasse in Webflow

Wir müssen unser Swiper Skript noch etwas erweitern für die Navigation, darüberhinaus verwenden wir ‘slidesPerView’, um mehr als ein Slide im sichtbaren Bereich anzuzeigen.

<script>

var swiper = new Swiper(".swiper", {

pagination: {

el: ".swiper-pagination",

clickable: true

},

slidesPerView: 2

});

</script>

Jetzt hast du eine 100% individuelle und funktionsfähige Navigation für deinen Swiper.

Slider mit Swiper.js

Wie bereits oben erwähnt:

Schaue dir für weitere Funktionalitäten wie Next- / Previous-Buttons, Loops oder Breakpoints die Demos an.

CMS Slider mit Swiper.js

Der Aufbau ist genauso wie bei einem statischen Slider: Der Collection List Wrapper wird zum ‘swiper’, die Collection List wird zum swiper-wrapper’ und das Collection Item wird zu ‘swiper-slide’. Vergiss nicht, die Klassen und Styles wie Flexbox usw. hinzuzufügen.

Statt .swiper geben wir dem CMS Slider die Komboklasse ‘is-cms’, diesen sprechen wir dann auch an. ‘spaceBetween’ definiert den Abstand zwischen den Slides.

<script>

var swiper = new Swiper(".is-cms", {

slidesPerView: 3,

spaceBetween: 32

});

</script>

CMS Slider mit Swiper.js

Fazit

Slidesshows durchaus sinnvoll bei viel und nur für bestimmte Nutzer interessanten Content.

Slideshows sind nützlich für die Präsentation von umfangreichem und zielgerichtetem Inhalt.

Der nativen Webflow Slider ist besonders für Anfänger geeignet und bietet auch die Möglichkeit zur CMS-Integration, während Swiper.js mit CSS- und Javascript-Kenntnissen eine leistungsstarke Option darstellt, um nahezu jede Art von Slider anzupassen und zu erstellen, insbesondere bei Kundenprojekten.

Mit Sternchen * markierte Links sind Affiliate-Links.

Bereit für ein erfolgreiches Webflow Projekt?

Noch kein Webflow Experte?

Erhalte exklusiven Zugang zu Fachwissen, Insider-Content und Ressourcen über Webflow in unserem Newsletter.

Danke! Du bist jetzt für den Newsletter angemeldet.
Ups! Etwas ist schiefgelaufen!
X Icon