AttRibutes
Custom Slider Dots
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

Custom Slider Dots

Customize slider dots for native Slider component in Webflow

Watch a quick tutorial

Custom Slider Dots • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

Slider

Add to Slider element

fs-sliderdots-element
=
"
slider
"

Slider Nav

Add to Slide Nav element

fs-sliderdots-element
=
"
slider-nav
"

Content

Add to Div Block, Text Block, Link Block, Embed, Image

fs-sliderdots-element
=
"
content
"

Optional attributes

Remove

Add to Content or Slider Nav elements

fs-sliderdots-remove
=
"
true
"

Active Class

Add to Content element

fs-sliderdots-active
=
"
ACTIVE_CSS_CLASS
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-sliderdots
></script>

Copy Script
2

Add these required attributes to the elements

Slider

The Slider target for the Custom Slider Dots
fs-sliderdots-element
=
"
slider
"

Defines which Slider this Solution will add Custom Sliders to.

Add this attribute:
Name
fs-sliderdots-element
Copy
Value
slider
Copy
Add it to those type(s) of element(s):
Slider
Nested in the Slider

Slider Nav

The Slider Nav element of the Slider
fs-sliderdots-element
=
"
slider-nav
"

Specifies the Slider Nav element that contains the new custom Slider Dots.

You can utilize a div block with the fs-sliderdots-element="slider-nav" attribute and locate it anywhere on the page.

Placing it inside the Slider is recommended to ensure Auto-Play stops when hovering, leveraging Webflow's native functionality that pauses Auto-Play during hover over the Slider.

‍

Add this attribute:
Name
fs-sliderdots-element
Copy
Value
slider-nav
Copy
Add it to those type(s) of element(s):
Slider Nav
IMPORTANT

To avoid styling issues, uncheck these options below:

Content

The custom slider dot
fs-sliderdots-element
=
"
content
"

This element serves as the custom slider dot content. The "content" element of each Slide will be utilized as the custom slider dot for that specific Slide, creating a distinct slider dot for every Slide in your Slider. Avoid setting the content element to display: none. The content elements need to be visible for Attributes to position them within the slider-nav.

Add this attribute:
Name
fs-sliderdots-element
Copy
Value
content
Copy
Add it to those type(s) of element(s):
Image
Embed
Div Block
Text Block
Button
Link Block
IMPORTANT

When used with a CMS Slider, it's essential that this content attribute is located within the CMS Collection List. The content attribute cannot be placed inside the slider element, as the CMS Slider will eliminate all content within the static slider. Instead, the content attribute must be situated inside each CMS Collection Item intended to populate the static slider.

3

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

settings

Remove

Hide the Custom Dot template
fs-sliderdots-remove
=
"
true
"

If applied to the "content" element, the original element will be deleted from the page once it is transformed into a custom Slider Dot.

If applied to the "slider-nav" element, any pre-existing content in the custom Slider Nav will be cleared out before the custom Slider Dots are added.

Add this attribute:
Name
fs-sliderdots-remove
Copy
Value
true
Copy
Add it to any element with
fs-sliderdots-element="content"
fs-sliderdots-element="slider-nav"
script icon
Script tag
?

Active Class

Style the custom dots when the correspondent slide is active
fs-sliderdots-active
=
"
CLASS_NAME
"

By default, the .is-sliderdots-active CSS class is assigned to the custom dots when their corresponding slide is active.

Users have the option to change this CSS class name by adding a specific attribute to the Slider element.

Add this attribute:
Name
fs-sliderdots-active
Copy
Value
CLASS_NAME
Copy
Example:
fs-sliderdots-active = "active-dot"
Default
fs-sliderdots-active = "is-slidedots-active"
Add it to element with
Add it to any element with
fs-sliderdots-element="content"
script icon
Script tag
?
Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-sliderdots-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-sliderdots-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-sliderdots-instance = "1"
fs-sliderdots-instance = "2"
fs-sliderdots-instance = "blog"
fs-sliderdots-instance = "team"
Learn more ways to set up multiple instances and how it works

Still need help?

Get Support

Build higher quality Sliders in less time using Finsweet Components

Create custom sliders without the mess

Check this Component