10 tolle, kostenlose Webflow Slider zum Klonen

Webflow Slider gehören zu den einfachsten und leistungsstärksten Komponenten im Webflow Designer. Mit ihnen lassen sich eindrucksvolle Slideshows generieren, die in Stil und Design genau deinen Anforderungen entsprechen.

Wie immer bei Webflow kannst du - musst du aber nicht - jeden Slider selber zusammenbauen. Es gibt einige grandiose Webflow Slider da draußen, die kostenfrei dupliziert und in Webflow geöffnet werden können.

Heute stelle ich dir zehn meiner liebsten Webflow Slider vor. Hol' dir Inspiration und klone deine Favoriten für deine Webflow Projekte. Viel Spaß.

Single-Slider der automatisch durchrotiert (ohne Custom Code)

Meines Erachtens der perfekte Silder für Fotografie-Portfolios. Der Single-Slider setzt ein Medium in den Fokus und rotiert automatisch durch. Das ist bei Webflow eher untypisch - normalerweise stoppt der Slider die automatische Wiedergabe, sobald man damit interagiert (was  auch gewünscht ist). Bei diesem Slider wird allerdings nach der Interaktion weiter rotiert.

https://webflow.com/website/MM006-Timed-Automatic-Slider

Karussell Slider Kollektion (mit Custom Code)

Ein klassischer Karussell Slider, bei dem man per Klick auf die Pfleiltasten am PC und auf die Pfeile unterhalb des Sliders von einem Bild zum nächsten springt. Gebaut wurde dieser Slider mit Splide.

https://webflow.com/website/Carousel-Slider-Collection

‍

Apple-like Produkt-Slideshow (mit Custom Code)

Nicht ganz, was man sich im klassischen Sinn unter einer Slideshow vorstellt. Aber eine tolle Möglichkeit, Produkte in verschiedenen Farben darzustellen. Ein Slider, der per Klick die Inhalte in unterschiedlichen Farben präsentiert.

https://webflow.com/website/CMS-Dynamic-Gallery

Klassische Slideshow mit dem Webflow Slider und angeschnittenen Bildern (ohne Custom Code)

Wer seine Fotografien - oder andere Arbeiten - in voller Größe präsentieren möchte, ist mit diesem Slider gut beraten. Ein Content-Element steht hier immer im Fokus - das folgende Bild wird angeschnitten angeteasert.

https://webflow.com/website/fullwidthslider

Slideshow, die sich angeschnitten im Kreis dreht (Ohne Custom Code)

Ein kreisförmiger Schieberegler mit animierten Panels im Hintergrund. Die Panels wurden in After Effects erstellt und über ein Slider-Element in Webflow ausgelöst. Besonders smart: Der Haupt-Slider wurde über benutzerdefinierten Code mit einem zweiten Slider verknüpft.

https://webflow.com/website/WebDev-For-You-Interaction-143

Responsive Slider mit mehrspaltigen Karten (ohne Custom Code)

Ein mehrspaltiger Slider im Kartenstil, der flüssig und reaktionsschnell agiert. Der Slider startet mit der ersten Karte linksbündig und endet mit der letzten Karte rechtsbündig. Die Slider Maske wird auf eine prozentuale Breite eingestellt. Die Anzahl der angezeigten Karten lässt sich je nach Bildschirmgröße steuern.

https://webflow.com/website/Responsive-Card-Slider

Horizontale Scroll-Slider-Animation mit Scrollbalken (mit Custom Code)

Durch Scrollen und Ziehen ausgelöster Slider - ergänzt durch Animationen. Der Slider funktioniert allerdings nicht auf Mobilgeräten. Clean, modern und intuitiv.

https://webflow.com/website/Bouncing-Scroll

Zwei Webflow Slider parallel dargestellt

Dieser Slider wurde mit dem nativen Webflow Slider und ein bisschen Custom Code (für die Slider-Toggle) realisiert. Der benutzerdefinierte Doppel-Slider basiert also auf zwei Slider-Elementen, die sich gemeinsam durch einen einzigen Klick auf die Schaltfläche verändern.

https://webflow.com/website/custom-double-slider

Bilder-Karussell Slider mit Swiper JS (mit Custom Code)

Dieser Karussell Slider im Vollbild-Layout wurde mit Swiper JS realisiert, wird in Endlosschleife abgespielt und über Navigationspfeile oder die Tastatur bedient. Auch eine Scroll-Steuerung ist möglich. Meiner Meinung nach ist dieser Slider eine gute Wahl, um verschiedene Kategorien auf einer Website darzustellen.

https://webflow.com/website/SwipeflowSwiper-JS-and-Webflow-Integration

Vertikaler Vollbild-Slider (mit Custom Code)

Super modern und ansprechend. Dieser Vollbild-Slider nutzt die gesamte Breite und Höhe des Bildschirms aus. Geskipped wird über zwei Navigationspfeile. Bilder, Farben und Texte ändern sich mit jedem Klick.

https://webflow.com/website/Vertical-Slider-kpzfb61g

Bonus: Eine eigene Slider Animation direkt in Webflow anlegen

Zum Abschluss noch ein kleiner Bonus. Wenn du eine eigene Slider Animation direkt in Webflow anlegen möchtest, schaue dir mein Tutorial zum Bauen eines Galerie Sliders an. Viel Spaß beim Ausprobieren, Klonen und umsetzen.