Drag & Infinity Slider
Der Slider, den du schon gebaut hast — jetzt zum Anfassen, und auf Wunsch ohne Anfang und Ende.
Am Telefon wischt jeder. Am Rechner versucht es fast jeder — und nichts passiert, weil der native Slider dort nur auf Pfeil und Punkt hört. Diese Lösung hängt sich an Pointer Events, die Maus, Finger und Stift gleich behandeln, und legt Webflows eigene Wischerkennung still. Sonst zögen zwei Hände am selben Slider.
- GreifenAb fünf Pixeln Bewegung wird aus dem Klick ein Zug. Darunter bleibt der Klick ein Klick — verlinkte Slides bleiben anklickbar.
- ZiehenDie Slides folgen der Hand ohne Verzögerung. Geschrieben wird nur im Takt des Bildaufbaus, nicht bei jedem Mausereignis.
- LoslassenEin Fünftel der Slide-Breite oder ein schneller Wisch — dann rückt der Slider weiter. Sonst federt er an seinen Platz zurück.
Dieses <script> in den Custom Code deines Projekts
Einmal pro Projekt genügt, auch wenn du die Lösung auf mehreren Seiten nutzt: Project Settings → Custom Code → Head Code. Das Skript lädt nebenher und hält das Rendern nicht auf; es läuft erst, wenn die Seite steht, und tut nichts, solange kein fpu-Attribut da ist.
<!-- FlowPowerUser · Drag & Infinity Slider -->
<script defer src="https://cdn.jsdelivr.net/npm/@flowpoweruser/attributes@1/drag-infinity-slider.js"></script>Das Attribut auf den Slider setzen
Es gehört auf den Slider selbst — nicht auf die Maske und nicht auf eine Slide. Im Navigator ist das das äußerste Element, das „Slider“ heißt. Alles darin bleibt unberührt: Maske, Slides, Pfeile und die Punkte-Navigation baut Webflow weiter wie bisher.
Auf den Sliderdas Element mit der Klasse w-slider
Slider fpu-slider-element="wrapper"
├─ Mask
│ ├─ Slide 1
│ ├─ Slide 2
│ └─ Slide 3
├─ Left Arrow
├─ Right Arrow
└─ Slide NavAutoplay in den Slider-Einstellungen ausschalten
Webflows Autoplay ist ein eigener Timer, der weiterzählt, während du ziehst. Die Lösung stoppt ihn beim Start und schreibt eine Warnung in die Konsole, aber sauberer ist es, ihn im Designer gar nicht erst einzuschalten: Slider auswählen, Einstellungen, „Autoplay slides“ aus. Alles andere in diesen Einstellungen — Easing, Pfeile, Punkte — bleibt unangetastet.
Veröffentlichen und ziehen
Im Designer passiert nichts — die Lösung läuft erst auf der veröffentlichten Seite. Dort mit der Maus über eine Slide ziehen: Der Zeiger wird zur Hand, die Slides folgen. Pfeile, Punkte und die Wischgeste am Telefon müssen weiter funktionieren. Tut sich gar nichts, sitzt das Attribut meist auf der Maske statt auf dem Slider; fehlen Maske oder Slides, sagt die Konsole genau das.
OptionalEndlos ohne RandStandard: die Einstellung aus Webflow
Ohne dieses Attribut gilt, was in den Slider-Einstellungen unter „Infinite“ steht. Setzt du es auf „true“, übernimmt die Lösung: An beiden Enden der Reihe liegen Kopien, sodass es in jede Richtung weitergeht, ohne dass etwas an den Anfang zurückspringt. Die Punkte-Navigation zählt dabei weiter deine echten Slides — die Kopien tauchen dort nicht auf. Bei nur einer Slide bleibt der Modus aus.
Auf den Slider
Webflow-EinstellungSchaltet den eigenen Endlos-Modus mit Kopien am Rand ein. Ohne Angabe entscheidet die Einstellung aus dem Designer.OptionalTempo, Startslide und KonsoleStandard: 500 ms, aktiver Punkt
Drei Feineinstellungen, alle auf dem Slider. Die Dauer gilt für jeden Wechsel — ob er per Zug, Pfeil oder Punkt ausgelöst wurde.
Auf den Slider
500Wie lange ein Wechsel dauert, in Millisekunden. Kürzere Werte wirken schnippisch, längere träge — 300 bis 700 ist der brauchbare Bereich.aktiver PunktMit welcher Slide der Slider startet, von null an gezählt. Ohne Angabe gilt die Slide, die Webflow als aktiv markiert hat.falseSchreibt beim Start eine Zeile in die Browser-Konsole: wie viele Slides gefunden wurden und mit welchen Einstellungen der Slider läuft.OptionalMit den Pfeiltasten blätternauf die Pfeil-Elemente
Dieses Attribut gehört nicht auf den Slider, sondern auf die Pfeile selbst — links und rechts einzeln, du kannst also auch nur eine Richtung freigeben. Danach hört der Pfeil auf die passende Pfeiltaste, aber nur, solange der Slider im Bild ist und niemand gerade in ein Eingabefeld tippt.
Auf die Pfeile
Left Arrow · Right ArrowZusätzliche Features
- Am Trackpad reicht ein Wischen zur Seite
- Waagerechtes Scrollen blättert weiter — dieselbe Geste, mit der man auf dem Mac ohnehin durch Bilder geht. Zwischen zwei Sprüngen liegt eine kurze Sperre, damit ein einziger Wisch nicht durch den halben Slider rauscht. Senkrechtes Scrollen bleibt Scrollen, die Seite hakt nicht.
- Ein Zug ist kein Klick
- Wer eine verlinkte Slide zur Seite zieht, will nicht auf ihr Ziel. Nach einem echten Zug bleiben Klicks kurz gesperrt; ein Klick ohne nennenswerte Bewegung geht dagegen ungehindert durch.
- Breakpoint-Wechsel werden nachgemessen
- Ändert sich die Breite des Sliders — Fenster ziehen, Gerät drehen, ein Breakpoint greift —, wird neu gerechnet und die aktuelle Slide bleibt an ihrem Platz, statt halb aus dem Bild zu rutschen.
- Webflow bleibt, wo es ist
- Kein zusätzlicher Wrapper, keine umgebauten Slides: Dein Markup und dein CSS bleiben unverändert, nur die Eingabe wechselt den Besitzer. Eine Grenze hat das — ein Mausdruck auf Pfeilen und Punkten erreicht keine Listener am Dokument, weshalb fremder Code, der darüber Menüs schließt, dort nicht anspringt.
- Eigener Code kann andocken
- Über das gemeinsame Dach meldet sich die Lösung an, sobald sie läuft. Anmelden lässt sich auch vorher — der Rückruf kommt trotzdem.