Infinite Draggable Marquee for Webflow With Stop On Hover

How it works

step #1
Copy the code within the "Before </body> tag" section of Page Settings
step #2
Implement in Webflow
Apply the attributes to the elements inside the page
Below is a list of the options to configure the infinite marquee.
Option
speed
I want to set the speed of the infinite marquee.
Add this attribute
Name
fc-marquee-speed

Value
1

Description
Use this attribute to specify the speed of the infinite marquee.
Speed is expressed in pixels per frame.
Default value is 1.
Where?
This attribute should be applied to the element with the splide class.
Option
tablet speed
I want to set the speed of the infinite marquee for the Tablet breakpoint.
Add this attribute
Name
fc-marquee-tablet-speed

Value
1

Description
Use this attribute to specify the speed of the infinite marquee for the Tablet breakpoint.
Speed is expressed in pixels per frame.
If not specified, the value of the fc-marquee-speed attribute is used.
Where?
This attribute should be applied to the element with the splide class.
Option
landscape speed
I want to set the speed of the infinite marquee for the Landscape breakpoint.
Add this attribute
Name
fc-marquee-landscape-speed

Value
1

Description
Use this attribute to specify the speed of the infinite marquee for the Landscape breakpoint.
Speed is expressed in pixels per frame.
If not specified, the value of the fc-marquee-tablet-speed attribute is used.
Where?
This attribute should be applied to the element with the splide class.
Option
portrait speed
I want to set the speed of the infinite marquee for the Portrait breakpoint.
Add this attribute
Name
fc-marquee-portrait-speed

Value
1

Description
Use this attribute to specify the speed of the infinite marquee for the Portrait breakpoint.
Speed is expressed in pixels per frame.
If not specified, the value of the fc-marquee-landscape-speed attribute is used.
Where?
This attribute should be applied to the element with the splide class.
Option
enable drag
I want to enable or disable the dragging functionality of the infinite marquee.
Add this attribute
Name
fc-marquee-enable-drag

Value
true

Description
Use this attribute to enable or disable the dragging functionality of the marquee.
Default value is 'true'.
Where?
This attribute should be applied to the element with the splide class.
Option
enable pause
I want to enable or disable the pause-on-hover functionality of the infinite marquee.
Add this attribute
Name
fc-marquee-enable-pause

Value
true

Description
Use this attribute to enable or disable the pause-on-hover functionality of the marquee.
Default value is 'true'.
Where?
This attribute should be applied to the element with the splide class.
Option
enable pause
I want to enable or disable the pause-on-hover functionality of the infinite marquee.
Add this attribute
Name
fc-marquee-enable-pause

Value
true

Description
Use this attribute to enable or disable the pause-on-hover functionality of the marquee.
Default value is 'true'.
Where?
This attribute should be applied to the element with the splide class.
More attributes to use
aria labelled by
I want to use a visible label for the carousel.
Add this attribute
Name
aria-labelledby

Value
section-heading

Description
Add this attribute if you want to use a visible label for the carousel.
Add this to the element with the splide class.
The value of the attribute should match the id of the visible label (e.g, the section heading) you want to associate with the carousel.
aria label
I want to assign this label to the carousel.
Add this attribute
Name
aria-label

Value
Infinite Marquee Example

Description
Add this attribute if you want to assign a specific label to the carousel.
Add this to the element with the splide class.

Infinite Slider Marquee

How it works

Copy the code within the "Before </body> tag" section of Page Settings

Implement in Webflow

Apply the attributes to the elements inside the page

More attributes to use