Drag & Infinity Slider
The slider you already built — now grabbable, and without a beginning or an end if you want.
On a phone everyone swipes. On a computer almost everyone tries — and nothing happens, because there the native slider only listens to arrows and dots. This solution hooks into pointer events, which treat mouse, finger and pen alike, and stands Webflow's own swipe detection down. Otherwise two hands would be pulling at the same slider.
- GrabFrom five pixels of movement onwards a click turns into a drag. Below that a click stays a click — linked slides remain clickable.
- DragThe slides follow your hand without lag. Writes happen only in step with the frame, not on every pointer event.
- Let goA fifth of the slide width, or a quick flick — then the slider moves on. Otherwise it springs back into place.
Add this <script> to your project's custom code
Once per project is enough, even if you use the solution on several pages: Project Settings → Custom Code → Head Code. The script loads alongside the page without holding up rendering; it runs once the page is in place and does nothing while no fpu attribute is there.
<!-- FlowPowerUser · Drag & Infinity Slider -->
<script defer src="https://cdn.jsdelivr.net/npm/@flowpoweruser/attributes@1/drag-infinity-slider.js"></script>Put the attribute on the slider
It belongs on the slider itself — not on the mask and not on a slide. In the Navigator that is the outermost element called “Slider”. Everything inside stays untouched: mask, slides, arrows and the dot navigation are still built by Webflow.
On the sliderthe element carrying the w-slider class
Slider fpu-slider-element="wrapper"
├─ Mask
│ ├─ Slide 1
│ ├─ Slide 2
│ └─ Slide 3
├─ Left Arrow
├─ Right Arrow
└─ Slide NavTurn autoplay off in the slider settings
Webflow's autoplay is a timer of its own that keeps counting while you drag. The solution stops it on start and writes a warning to the console, but it is cleaner not to switch it on in the first place: select the slider, open settings, turn “Autoplay slides” off. Everything else in those settings — easing, arrows, dots — stays untouched.
Publish and drag
Nothing happens in the Designer — the solution only runs on the published page. There, drag across a slide with the mouse: the cursor turns into a hand and the slides follow. Arrows, dots and the swipe gesture on a phone have to keep working. If nothing at all happens, the attribute is usually on the mask instead of the slider; if mask or slides are missing, the console says exactly that.
OptionalInfinite, with no edgeDefault: whatever Webflow is set to
Without this attribute, whatever the slider settings say under “Infinite” applies. Set it to “true” and the solution takes over: copies sit at both ends of the row, so it keeps going in either direction without anything jumping back to the start. The dot navigation still counts your real slides — the copies never show up there. With only one slide the mode stays off.
On the slider
Webflow settingTurns on the solution's own infinite mode with copies at each end. Without it, the setting from the Designer decides.OptionalSpeed, starting slide and consoleDefault: 500 ms, active dot
Three fine adjustments, all on the slider. The duration applies to every change — triggered by a drag, an arrow or a dot alike.
On the slider
500How long a change takes, in milliseconds. Shorter feels snappy, longer feels sluggish — 300 to 700 is the usable range.active dotWhich slide the slider starts on, counted from zero. Without it, the slide Webflow marked as active applies.falseWrites one line to the browser console on start: how many slides were found and which settings the slider runs with.OptionalPaging with the arrow keyson the arrow elements
This attribute does not go on the slider but on the arrows themselves — left and right separately, so you can enable just one direction. The arrow then responds to the matching arrow key, but only while the slider is in view and nobody is typing into an input field.
On the arrows
Left Arrow · Right ArrowAdditional features
- On a trackpad, a sideways swipe is enough
- Scrolling sideways pages through — the same gesture you use for images on a Mac anyway. A short lock sits between two jumps so that one swipe does not race through half the slider. Vertical scrolling stays scrolling, the page does not catch.
- A drag is not a click
- Whoever drags a linked slide aside does not want to land on its target. After a real drag, clicks stay blocked for a moment; a click without noticeable movement passes through untouched.
- Breakpoint changes are measured again
- When the slider's width changes — dragging the window, turning the device, a breakpoint taking hold — everything is recalculated and the current slide stays put instead of sliding half out of view.
- Webflow stays where it is
- No extra wrapper, no rebuilt slides: your markup and your CSS stay as they are, only the input changes hands. There is one limit to that — a mouse press on arrows and dots does not reach listeners on the document, so third-party code that closes menus that way will not fire there.
- Your own code can hook in
- The solution registers with the shared roof as soon as it runs. You can register beforehand as well — the callback arrives either way.