How to add an attribute:

close icon
Hey! Give us some feedback here.
Components

Custom Slider Dots

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

4,339,161

loads per month

Custom Slider Dots
Step #1

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

copy icon
Copy Script
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.

navigator arrow
SLIDER
I want this
slider icon

Slider

to be the slider that owns the custom dots
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-sliderdots-element
copy icon
Value
slider
copy icon
Defines a Slider instance.
how to add sliderdots slider attribute
navigator arrow
SlideR nav
I want this

Slide Nav

to be the place where the custom slider dots are displayed
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-sliderdots-element
copy icon
Value
slider-nav
copy icon
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:
how to add sliderdots nav attribute
Using a div block as a custom Slide Nav:
how to add sliderdots nav attribute
* Make sure to uncheck all these styles:
how to add sliderdots nav attribute
navigator arrow
CONTENT
I want this
div block icon

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

to be the custom slider dot content of its Slide
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-sliderdots-element
copy icon
Value
content
copy icon
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.
how to add sliderdots content attribute
navigator arrow
Option
REMOVE
I want to remove the original element after copying it inside the slide dot
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-sliderdots-remove
copy icon
Value
true
copy icon
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.
navigator arrow
Option
ACTIVE CLASS
I want to style the custom dots when the correspondent slide is active
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-sliderdots-active
copy icon
Value
ACTIVE_CSS_CLASS
copy icon
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.

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
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 icon
Copy this example
Example 2
Custom slider dots (removing the original content)
Copy and paste this example directly on Webflow
copy icon
Copy this example

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

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.