Slider Dots - Customize slider dots for native Webflow Slider component

Scroll horizontally to see documentation

Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

SLIDER

I want this

Slider

to be the slider that owns the custom dots

See how it works

Add this attribute

Description

Name

fs-sliderdots-element

Value

slider

Defines a Slider instance.

SlideR nav

I want this

Slide Nav

to be the place where the custom slider dots are displayed

See how it works

Add this attribute

Description

Name

fs-sliderdots-element

Value

slider-nav

Defines the Slider Nav element that wraps the new custom Slider Dots.

If you want, you can use a div block with the fs-sliderdots-element="slider-nav" attribute and place it anywhere on the page.

It's recommended to place it inside the Slider itself to make sure the Auto-Play stops when hovering (this is a native feature from Webflow, it pauses Auto-Play when the user hovers anywhere on the Slider).

Using the native Slide Nav:

Using a div block as a custom Slide Nav:

* Make sure to uncheck all these styles:

CONTENT

I want this

Div Block, Text Block, Button, Link Block, Embed or Image

to be the custom slider dot content of its Slide

See how it works

Add this attribute

Description

Name

fs-sliderdots-element

Value

content

This element will be used as the custom slider dot content. Each Slide's "content" element will be used as that Slide's custom slider dot. This will create a unique slider dot for each Slide in your Slider. Do not set the content element to display: none. The content elements must be visible so Attributes can place them inside the slider-nav.

Important if using together with CMS Slider: It is required that this content attribute is inside the CMS Collection List. The content attribute can not be placed inside the slider element because CMS Slider will remove all content inside the static slider. The content attribute must be placed inside each CMS Collection Item that will populate the static slider.

Option

REMOVE

I want to remove the original element after copying it inside the slide dot

See how it works

Add this attribute

Description

Name

fs-sliderdots-remove

Value

true

If added to the "content" element, the original element will be removed from the page after converting it to a custom Slider Dot.

If added to the "slider-nav" element, all existing content in the custom Slider Nav will be removed before adding the custom Slider Dots.

Where?

This attribute can be added to the "content" and the "slider-nav" elements.

Option

ACTIVE CLASS

I want to style the custom dots when the correspondent slide is active

See how it works

Add this attribute

Description

Name

fs-sliderdots-active

Value

ACTIVE_CSS_CLASS

By default, a ".fs-sliderdots_active" CSS class will be added to the custom dots when the correspondent slide is active.
‍
Users can modify the name of that CSS class by adding this attribute to the Slider element.

Where?

This attribute should be added to the "content" element.

I want to have more than one instance of Custom Slider Dots on the same page

See how it works

Optional

This element is optional to add

You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
‍
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.

Example of this solution:

Attributes that must have instances

Second instance example

Third instance example

fs-sliderdots-element = "slider"

fs-sliderdots-element = "slider-2"

fs-sliderdots-element = "slider-3"

fs-sliderdots-element = "slider-nav"

fs-sliderdots-element = "slider-nav-2"

fs-sliderdots-element = "slider-nav-3"