Components
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
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.
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).
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 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.
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.
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.
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
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 = "slide"
fs-sliderdots-element = "slide-2"
fs-sliderdots-element = "slide-3"
fs-sliderdots-element = "slide-nav"
fs-sliderdots-element = "slide-nav-2"
fs-sliderdots-element = "slide-nav-3"
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
