Made by

Infinite marquee slider

Adapts to any screen size, automatically duplicates items to fit the full width
.

LogoLogoLogo

It also works with CMS:

Charlie Davis

Charlie Davis

Bob Brown

Bob Brown

Alice Johnson

Alice Johnson

Jane Smith

Jane Smith

John Doe

John Doe

Clone
1

Add the code below before </body> tag in the page settings.

<!-- Marquee slider by Wrapp-->
<script src="https://cdn.jsdelivr.net/gh/Wrapp-dev/public-scripts@main/dist/marquee.min.js"></script>
2

Add data-wr-marquee attribute to any element you want to be a slider.

Optional:

3

Set scroll direction:

Add data-wr-direction attribute to the slider. Use left or right as value.

Default: left

4

Set scroll speed (in pixels per second):

Add data-wr-speed attribute to the slider. Use your number as value.

Default: 50

5

Pause on hover

Add data-wr-pause-on-hover attribute to the slider. No value.

6

Webflow interactions

Add data-wr-interactions attribute to the slider if you use Webflow interactions inside the items. It will restart all interactions on the page.
No value.

HTML structure

<div data-wr-marquee data-wr-marquee-direction="left" data-wr-marquee-speed="100" data-wr-marquee-pause-on-hover>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>