How can I style the standard slider circles in Webflow to have a fill for the selected circle and a border with no fill for the non-selected circles?

To style Webflow's slider nav dots with a fill for the active dot and a border/no fill for inactive ones, you’ll need to modify the Slider Nav component using Webflow’s Designer panel.

1. Select and Style the Slider Nav Dots

• Click the Slider component in the Navigator.
• Inside it, find and select the Slider Nav (usually labeled as "Slider Nav" or "Slide Nav").
• Select one of the nav dots (labeled "Slide Nav Link") to begin styling.

2. Style the Non-Selected (Default) Dots

• With a nav dot selected, create a combo class (e.g., Slide Dot).
• Apply these styles:
• Border: Add a solid border (e.g., 2px solid #000 or your theme color).
• Background: Set to transparent.
• Border Radius: Set to 100% to make it circular.
• Width/Height: Set fixed size (e.g., 10px by 10px).
• Margin: Add spacing as needed between dots.
• Transition: Add a smooth background-color transition (optional for nicer effect).

3. Style the Selected (Active) Dot

• With the same dot still selected, click the Selector dropdown above the style panel.
• Choose Current (Slide Nav Link Current) — this only appears when a slide is selected.
• Apply these styles to the current state:
• Background: Apply solid fill color (e.g., #000).
• Border: Can be same or none, depending on your preferred style.

4. Test the Slider Nav Dots

• Preview or publish your site to ensure:
• The selected dot shows as filled.
• The non-selected dots remain as border-only with no fill.

Summary

Create a combo class on the Slide Nav Link for styling, then use the “Current” state selector to target the active dot. Apply a fill to the active state and a border/no fill to the default state for the desired look.