Change slider navigation styling

Design help General
1

Hi there,

I’m hoping someone can help me. I’m looking to style the standard slider circles to look like attached. The selected circle should have a fill and the non selected have a border and no fill.
I assume it’s custom code. Any help would be appreciated.

nav

Thanks a lot

Niall

2

Hey @Niall_Mc_Dermott

Natively in Webflow it’s not possible to style or edit those dots in a slider.

Try taking a look at some of these other articles on the forum about this same topic :slight_smile:

Slider “Nav-Circles” color change
Custom dots in slide nav
Edit Slider arrows and buttons
Slider Nav Dots Labels
Custom slider nav

Do any of these answer your question?

3

I tried with those links but hit a brick wall. I was getting circles of different sizes and different line heights. The best I could get is attached:navwrong

4

Any suggestions would be very much welcome

5

Hi, try this custom code:

<style>
.w-slider-dot {
  border-width: 2px;
  border-color: #D2BC8B;
  border-style: solid;
  background-color: rgba(255,255,255,0);
}
.w-slider-dot.w-active {
  border: none;
  background-color: #D2BC8B;
}
</style>
1 Like
6

Thank you, (@piotr_k) Piotr! :sparkles:

Had been looking for this solution