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.

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 placed inside a Slide element. Each Slide's "content" will be used as that Slide's custom slider dot. This will create a unique slider dot for each Slide in your 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

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

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