How to customize the design of slider dots in Webflow?

Tutorial
March 20, 2023
3 min
Webflow slider in the background with an arrow showing customized points
Key points

By default, the customization of "Slider Dots" in Webflow is quite limited. Fortunately, there are two simple methods to make them completely customizable!

Learn how to customize the design of the slider dots on your Webflow sites in this tutorial 👇

Method 1: Integrate CSS Code

In this tutorial, we will customize the color and size of the navigation dots in our slider. However, you can fully customize your slider by adding CSS properties.

1. Add an Embed Code Element to Your Slider

Embedding code in Webflow
Adding an Embed Element

2. Paste the CSS Code Below

<style>
.w-slider-dot {
  background-color: #C7D2D6;
  width: 12px;
  height: 12px;
}

.w-slider-dot.w-active {
  background-color: #67777E;
  width: 12px;
  height: 12px;
}
</style>

3. Define Your Own Styles

Custom CSS code on Webflow
Example of CSS code for slider dots

Video Tutorial 🍿

Method 2: Use Finsweet Attributes

Finsweet offers a no-code solution, with attributes to take your customization even further without coding!

With Finsweet's attributes (Fs Slider Dots), you can define any element—a picture or a div block, for instance—and replace the native dots of your Webflow slider. A flexible, and 100% no-code solution for further enhancing the customization of your website.

Discover how by following this short video tutorial (EN version only, for now)

Find out how by accessing the documentation 

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today