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

A woman speaks on stage at a conference, wearing a headset microphone. Behind her, a large black screen displays the question “What then?” in bold white text.
Events
Webflow

Digidop attends FLOWconf 2025, the biggest Webflow & marketing event in Europe.

Digidop attends FLOWconf 2025, the biggest Webflow & marketing event in Europe.
Visual overview of several modern web typefaces in 2025, each displayed on a vibrant background: Editorial New, DM Serif Display, Aeonik, SF Pro Rounded, Rader, Champ, Monument, Canicule, Clash Display, Supply, Agrandir, and more — a graphic composition highlighting typographic diversity.
Documentation
Design

The 20 Best Fonts for a Modern and Impactful Website in 2025

The 20 Best Fonts for a Modern and Impactful Website in 2025
Mosaic of homepage designs from several Webflow agencies (Digidop, N4, Refokus, Flow Ninja, Tonik, Finsweet, Edgar Allan), showcasing diverse creative approaches and visual identities centered around the Webflow logo.
Storytelling
Webflow

My Top 7 Webflow Agencies in 2025 (From a Founder’s Perspective)

My Top 7 Webflow Agencies in 2025 (From a Founder’s Perspective)

Want to turn your website into your most valuable asset?

Contact us today