How to customize the design of slider dots in Webflow?

Tutorial

March 20, 2023

3 min

H2 Example

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