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?
TL;DR
- Assign a class (e.g.,
Slider Dot) to the slider navigation dots and style them with a border, transparent background, and circular shape. - Use the
w-activestate to change the active dot’s background color, and optionally add transitions for smoother animation.
To style the Webflow slider navigation dots so that the active dot is filled and inactive dots show only a border, you’ll use Webflow’s built-in Navigator, Style panel, and standard slider components.
1. Select the Slider Component
- Click on your slider in the Designer (either in the canvas or using the Navigator panel).
- Locate the Slider Nav (Dots) within the Slider component.
2. Style the Navigation Dots (Inactive State)
- Click on one of the dots (inside the Slider Nav) to select it.
- Create a class, for example, name it
Slider Dotso you can style all dots consistently. - In the Style panel, set:
- Width and Height (e.g., 10px x 10px for a circular dot).
- Border: Add a border (e.g., 1px solid black or any color).
- Background Color: Set to transparent (no fill).
- Border Radius: 50% (to make it a circle).
- Optionally adjust margin or spacing between dots.
3. Style the Active Dot Using the w-active State
Webflow automatically adds the class w-active to the currently active dot.
- With a dot selected, click the Selector field at the top of the Style panel.
- Type in
Slider Dot(or whatever class you used), then add a combo class or select the state: - Use this syntax:
Slider Dot.w-active - Style this state by setting:
- Background Color: Set to the desired fill color.
- Border: You can keep the same or remove it.
- Any other styles (e.g., transition effects) if needed.
4. Optional: Add a Smooth Transition
To make the style changes smoother when the slide changes:
- On the base
Slider Dotclass, go to the Transitions section. - Add a background-color and/or border-color transition with a short duration and easing.
Summary
To style Webflow slider dots with a filled circle for the active slide and border-only for inactive ones, apply a base class with border and no fill, then use the w-active state to set a background color on the selected dot. Use transitions for smoother UI behavior.