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
- Add a slider and assign a class (e.g., "Nav Circle") to the navigation circles with transparent background and border.
- Use the "Current" state selector to style the active circle with a fill color, maintaining consistent size and shape.
To style slider navigation circles in Webflow so that the active circle has a fill and non-active ones have only a border but no fill, follow these steps using combo classes and custom styling.
1. Add a Slider Element
- Drag a Slider component from the Add panel into your layout.
- Select the Slider to access its inner elements: Slides, Arrows, and Slide Nav (the circles).
2. Select and Style the Slide Nav
- Click one of the slider nav circles to select the Slide Nav element.
- Give it a class like "Nav Circle".
- With the base "Nav Circle" class selected, style the non-active state:
- Set Background Color: Transparent
- Add Border: 1px solid of your preferred color
- Set Border Radius: 100% (to keep it circular)
- Set Width/Height: e.g., 10px x 10px or adjust as needed
3. Style the Selected Circle
- While the Nav Circle is still selected, click the Selector field dropdown and choose "Current" (Webflow adds a
w-activeclass behind the scenes). - This lets you style the active navigation bullet (the selected slide).
- With "Nav Circle Current" selected:
- Set Background Color: Choose your fill color
- Remove Border: Or keep it if desired
- Keep size and shape consistent with other circles
4. Optional: Add Spacing Between Circles
- Still on the base "Nav Circle" class, add margin-left or margin-right to space the bullets.
5. Preview and Test
- Preview your site (hit the eye icon) and cycle through the slides.
- The selected circle should now show as filled, while the others remain border only with no fill.
Summary
Style the slider circles by giving the base nav circle a class (e.g., "Nav Circle") with a transparent background and a border, then target the "Current" state to add a fill color for the selected slide. Use Webflow’s combo class system and built-in selectors to differentiate styles accurately.
