How to Customize Slider Dots and Navigation in Webflow

To customize webflow slider dots, select the Slide Nav element in your slider. In the Style panel, change the font size to resize the dots and the text color to recolor them. Turn on Round for circle dots. For custom shapes, active dot color, and styled arrows, add a small code snippet that targets the .w-slider-dot and .w-slider-arrow classes. This works on the native Webflow Slider.

The Webflow Slider comes with dots and arrows built in. The default dots are small and plain. Most teams want to change the color, size, and shape to match their brand. This guide shows you how to style webflow slider navigation two ways. First with no code in the Designer, then with a few lines of custom code for full control.

We build custom Webflow sliders for clients every week at theCSS Agency. These are the exact steps our team uses.

The Parts of a Webflow Slider

Before you style anything, it helps to know the pieces. A Webflow Slider has these parts:

• Slider: the main wrapper for the whole component.
• Mask: the window that shows one slide at a time.
• Slides: the panels that hold your content.
• Slide Nav: the row of dots below the slider.
• Left Arrow and Right Arrow: the arrows on each side.

You will style two of these most often. The Slide Nav holds the dots. The arrows sit on the left and right. Each part has a class you can target with code.

Here are the classes Webflow adds by default:

• .w-slider-dot is each dot.
• .w-slider-dot.w-active is the active dot.
• .w-slider-nav is the dot container.
• .w-slider-arrow-left and .w-slider-arrow-right are the arrows.
• .w-icon-slider-left and .w-icon-slider-right are the arrow icons.

Method 1: Style Slider Dots in the Webflow Designer (No Code)

You can change the basics without any code. Follow these steps.

Step 1: Add a slider

Add a Slider element onto your page. Webflow adds two slides, dots, and arrows by default. Add your content to each slide.

Step 2: Select the Slide Nav

Open the Navigator panel on the left. Click the Slide Nav element. This is the row of dots under the slider.

Step 3: Change the dot size

With the Slide Nav selected, open the Style panel. Change the font size value. A bigger font size makes bigger dots. This is how you control webflow slider dots size.

Step 4: Change the dot color

Still on the Slide Nav, set the text color. This changes the dot color. The inactive dots show a lighter version, and the active dot shows the full color.

Step 5: Make the dots round

Select the slider, then open its settings. Turn on the Round option for the nav. Your dots become clean circles instead of squares.

Step 6: Add spacing

Want more space around the dots? Adjust the padding on the Slide Nav element. This moves the dots up, down, or apart.

The Designer covers color, size, round shape, and spacing. For custom shapes and the active dot color, use the code method below.

Method 2: Create Custom Slider Dots With Code

Code gives you full control. You can set the exact size, the active color, and new shapes. Add an Embed element to the page, or paste the code into your page settings.

Change dot color and size

This snippet sets a gray dot and a purple active dot. Swap the colors and sizes for your brand.

<style>
.w-slider-dot {
  background-color: #d1d5db;
  width: 10px;
  height: 10px;
}
.w-slider-dot.w-active {
  background-color: #7c3aed;
}
</style>

The .w-slider-dot line styles every dot. The .w-active line styles only the current dot. This is the cleanest way to set a webflow slider dots color that matches your design.

Make square or rounded dots

Change the corner radius to switch shapes. Use 0 for squares and 999px for full circles.

<style>
.w-slider-dot {
  border-radius: 0;
  width: 12px;
  height: 12px;
}
</style>

Create pill or bar dots

Want a modern look? Make the active dot stretch into a bar. This style is popular on hero sliders.

<style>
.w-slider-dot {
  border-radius: 999px;
  width: 10px;
  height: 10px;
  background-color: #d1d5db;
  transition: width 0.3s ease;
}
.w-slider-dot.w-active {
  width: 28px;
  background-color: #7c3aed;
}
</style>

The active dot grows wider, so it reads as a bar. The transition makes the change smooth. These custom shapes turn plain slider navigation dots into a branded detail.

How to Customize Slider Arrows in Webflow

The arrows work the same way. You can restyle them in the Designer or with code.

Style arrows in the Designer

Select the Left Arrow or Right Arrow in the Navigator. In the Style panel, change the size, color, and background. You can also round the corners or add a shadow. Click the arrow icon inside to swap it for a different one.

Style arrows with code

This snippet changes the arrow color and size. It also moves the arrows outside the slider.

<style>
.w-slider-arrow-left,
.w-slider-arrow-right {
  color: #7c3aed;
  font-size: 28px;
}
.w-slider-arrow-left { left: -60px; }
.w-slider-arrow-right { right: -60px; }
</style>

The color line changes both webflow slider arrows at once. The left and right lines push them away from the edges. Adjust the values to fit your layout.

How to Hide Slider Dots or Arrows

Sometimes you want a cleaner look. You can hide the dots, the arrows, or both.

Hide the dots with this code:

<style>
.w-slider-nav { display: none; }
</style>

Hide the arrows with this code:

<style>
.w-slider-arrow-left,
.w-slider-arrow-right { display: none; }
</style>

You can also toggle the nav and arrows off in the slider settings. Open the slider, then uncheck Nav or Arrows. Keep at least one control so people can still move through slides.

How to Use Numbers or Thumbnails as Dots

Want numbered dots or image thumbnails? This is an advanced setup. The native dots do not hold text or images on their own. You have two common paths:

• Numbers: add a small counter with custom code that reads the active slide.
• Thumbnails: build a custom nav with a CMS list and link each item to a slide.

Both need Webflow custom code and some testing. For most sites, styled dots and arrows are enough. Use thumbnails only when the extra work adds real value.

Responsive Tips for Slider Dots

Your slider shows on phones too. Keep the controls easy to tap. Follow these rules:

• Make dots at least 8px to 12px wide on mobile.
• Leave space between dots so taps do not miss.
• Move arrows inside the slider on small screens, since outside space is tight.
• Test the slider on a real phone, not just the Designer.

You can set different sizes per breakpoint. Select the breakpoint first, then change the style. Webflow saves each change for that screen size.

Common Problems and How to Fix Them

A few small issues come up often. Here are quick fixes.

• The dots do not change. Your code did not load. Publish the site and refresh with a hard reload.
• Only the active dot should be colored, but all changed. Move the color rule to the .w-active line.
• The dots look square after adding code. Add border-radius: 999px to make them round again.
• The arrows sit in the wrong spot. Adjust the left and right values, or the padding on the slider.
• Custom code works in Preview but not live. Republish the site, since custom code only runs on the published page.

Best Practices for Slider Navigation

Use these tips to keep your slider clean and clear:

• Match the dot and arrow colors to your brand palette.
• Keep the active dot easy to spot with a strong color.
• Do not use more than five or six slides, or the dots get crowded.
• Give arrows enough contrast against the slide behind them.
• Reuse one style across the site for a consistent look.

Conclusion

Now you know how to style webflow slider dots and navigation two ways. The Designer covers color, size, round shape, and spacing with no code. A few lines of custom code unlock bar dots, active colors, and styled arrows. Together they turn a plain slider into a polished, on-brand feature.

Start with the color and size in the Designer. Then add the code snippet for the shape you want. Test it on the live site and on a phone.

Want a fully custom Webflow site with sliders that match your brand? theCSS Agency builds fast, custom Webflow sites for SaaS and B2B teams. Book a call to talk about your project.

FAQs

1. How do I change the slider dot color in Webflow?

Select the Slide Nav element and set its text color in the Style panel. For the active dot color, add a short code snippet that targets the .w-slider-dot.w-active class.

2. How do I resize slider dots in Webflow?

Select the Slide Nav and change the font size in the Style panel. A larger font size makes larger dots. You can also set the width and height with custom code.

3. Can I make Webflow slider dots into bars?

Yes. Add custom code that makes the active dot wider with a rounded radius. The active dot then looks like a bar instead of a circle.

4. How do I change the slider arrows in Webflow?

Select the Left Arrow or Right Arrow and style it in the Designer. You can swap the icon, change the color, and move the arrow with code.

5. How do I hide the slider dots in Webflow?

Add the code .w-slider-nav { display: none; }, or uncheck Nav in the slider settings. Keep the arrows so users can still move through slides.

6. Do custom slider dots work on mobile?

Yes. The styles apply on all screens. Keep dots large enough to tap and test the slider on a real phone.

7. What class controls slider dots in Webflow?

The .w-slider-dot class controls each dot. The .w-slider-dot.w-active class controls the active dot.