2 methods to customize slider dots

Learn how to easily customize the design of your slider's navigation points on your webflow site with these two tips (code and no-code)

Key points to remember

Natively, the customization of "Slider Dot" in webflow is very limited. Fortunately, there are two easy ways to make them fully customizable!

Find out how to customize the design of the slider dots (navigation points) of your webflow sites in this tutorial 👇

Method 1: Integrate CSS code

For this tutorial, we will customize the color and size of the navigation points of our slider. But you can customize your slider 100% by adding CSS properties.

1. Add an embed code element in your slider

Integration of an embed code on 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

The video tutorial 🍿

Method 2: Using Finsweet attributes

Finsweet offers a no-code solution, with the attributes to go even further and in "no-code"!

With theFs Slider Dots of Finsweet you can define any element: an image or a div block for example, and have it replace the native dots of your Webflow slider. A flexible and 100% no-code solution to go even further in the customization of your website

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

Find out how by accessing the documentation