Custom Slider Dots

Customize native Webflow slider dots with content. Add images, text, or any type of element inside native Webflow slider navigation.

Get Started

4,448,446

loads per month

Step #1

Copy the Solution <script> and paste into the <head> of your page

Copy Script

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"

Working examples

See this solution working live in this Webflow project.

Example 1

Custom slider dots (keeping the original content)

The following element will act as a custom slide dot:

Slide 1

The following element will act as a custom slide dot:

Slide 2

The following element will act as a custom slide dot:

Slide 3

Copy and paste this example directly on Webflow

Copy this example

Example 2

Custom slider dots (removing the original content)

Copy and paste this example directly on Webflow

Copy this example

Combinations using Custom Slider Dots:

You can combine this Attribute with others to create more complex solutions.

CMS Slider

Custom Slider Dots

Create a slider with dynamic content and style the nav dots.

CMS Slider

Custom Slider Dots

Mirror Click

Webflow's dynamic attributes

Disable Scrolling

Open a specific content in a CMS Slider with dynamic content inside a modal popup.

Frequently Asked Questions

Everything you need to know about this attributes solution.

No FAQ items found yet. Join Finsweet Community on Slack if you have any question related to this solution.

Developer documentation

Check the dev documentation

Next time implement inside Webflow

Use Finsweet Extension

Attention, you're browsing the Attributes Legacy (v1) documentation

Adopt the NEW Finsweet Attributes!

This version of Attributes — named Attributes Legacy — is now outdated ¹. For new developments, we highly recommend transitioning to the latest Finsweet Attributes to benefit from enhanced features and support.²

¹ Attributes Legacy will remain operational for existing projects, but please note that we have ceased offering support for this version.
² The new version of Finsweet Attributes and Attributes Legacy are incompatible, they can't be used on the same page.

Sign up for future releases!

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

How to add an attribute:

Custom Slider Dots

Copy the Solution <script> and paste into the <head> of your page

Implement in Webflow

Apply attributes to elements on the page

Slider

Slide Nav

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

Working examples

Combinations using Custom Slider Dots:

Create a slider with dynamic content and style the nav dots.

Open a specific content in a CMS Slider with dynamic content inside a modal popup.

Frequently Asked Questions

Developer documentation

Next time implement inside Webflow

Adopt the NEW Finsweet Attributes!

Sign up for future releases!