Build an Infinite Draggable Marquee in Webflow (No Code)

Build an infinite marquee in Webflow that scrolls forever, slows down smoothly when someone hovers, and even lets visitors drag it left and right — all without writing a single line of JavaScript. This is the rebuilt version of one of my most popular solutions, reshaped by years of community feedback into something more powerful and more customizable.

Everything is driven by attributes on a single element, so from your side it stays completely no-code. You get direction control, per-breakpoint speed, optional pause-on-hover, optional dragging, custom styling for the active slide, and full support for both static slides and Webflow CMS. And because every option ships with a sensible default, a marquee works the moment you drop it in — you only add attributes to change what you care about.

How it works

It’s a Splide marquee, configured entirely with attributes. Under the hood the component uses the Splide carousel library, but you never call it directly — a script in the page’s before-</body> section reads your custom attributes and wires everything up. That means the whole configuration lives in Webflow’s settings panel, and none of the attributes are strictly required: sensible defaults kick in wherever you leave one off.

A few class names are mandatory. Splide looks for specific classes to attach itself: splide on the content wrapper (the marquee root), splide__track on the track, splide__list on the list, and splide__slide on each slide. Building the list as a real unordered list (ul with li items) rather than plain divs keeps the markup semantic and accessible. The surrounding section gets overflow: hidden so a marquee wider than the viewport never triggers horizontal scrolling, and the list gets will-change: transform to keep the animation smooth.

Speed is one number that carries direction. The FC-marquee-speed attribute is measured in pixels per frame; a positive value scrolls left-to-right, a negative value right-to-left, and the default is 1. For real responsiveness you can override it per breakpoint with FC-marquee-<breakpoint>-speed (for example FC-marquee-landscape-speed), leaving the breakpoints you don’t set on the base speed. Dragging and pause-on-hover are both on by default — set FC-marquee-enable-drag or FC-marquee-enable-pause to false to turn either off.

The active slide styles itself. Splide adds an is-active class to whichever slide is centered, so you never tag anything by hand. Copy your slide element in the style guide, add the is-active combo class, and style that state — bump the opacity back to full, drop the grayscale, scale it up slightly, and set position: relative with a z-index so it sits above its neighbors when they overlap. One layout gotcha: space your slides with horizontal padding, not flex gap, because gap can cause glitches in the scrolling animation.

CMS just remaps the classes, and accessibility needs a label. Moving to a CMS-powered marquee changes almost nothing structurally: put splide__track on the list wrapper, splide__list on the Collection List, and splide__slide on each Collection Item, then set the same attributes. Finally, a scrolling region needs an accessible name — if you have a visible heading, add aria-labelledby to the splide element pointing at the heading’s id; if there’s no visible heading (as in the CMS example), add an aria-label describing the marquee instead.

How to use it

1. Clone the project. Grab the Webflow cloneable — it includes the full structure, the styling, and the commented script. A reference guide listing every attribute sits at the bottom of the cloned page.

2. Build the structure. Give the surrounding section overflow: hidden. Inside, add your content wrapper with the splide class, a splide__track div, a splide__list unordered list, and your splide__slide list items. Remove the list’s bullets, set it to flex, zero its margins and padding, and add will-change: transform.

3. Style the slides and the active state. Space slides with horizontal padding (not gap), and set the flex children not to grow or shrink. In the style guide, add the is-active combo class to a slide copy and style the active look — full opacity, no grayscale, a slight scale-up, position: relative, and a z-index.

4. Configure with attributes. On the splide element, set FC-marquee-speed for direction and speed, add FC-marquee-<breakpoint>-speed for any breakpoint you want to run differently, and set FC-marquee-enable-drag or FC-marquee-enable-pause to false if you want to disable dragging or pause-on-hover. Skip any of these to accept the defaults.

5. Label it for accessibility. Add aria-labelledby to the splide element with the id of a visible heading, or an aria-label if there’s no heading to reuse.

6. Go CMS if you need it. Rebuild the same structure with a Collection List: splide__track on the list wrapper, splide__list on the Collection List, splide__slide on each Collection Item — then set the same attributes.

7. Publish and test. Check the live page: the marquee should scroll smoothly, slow on hover (unless disabled), respond to dragging, restyle the active slide, and change speed across breakpoints.