Custom dots in slide nav

I found a few post about more difficult need of slides dots customization, with some scripts… but unfortunately I can apply it to my situation. I need to change the dots in webflow slides nav from this

to this

Preferable to make this dots with CSS, or by uploading svg icons.
I don’t work with code, but if somebody gives me a few lines of custom code, I will be able to copy it :slight_smile:
Many thanks!

1 Like

Please provide both your read-only designer share link and published URL when asking for help. Thank you.

I hope I understood you correctly
read only link: https://webflow.com/design/marina-sailing?p=56f14479d619bdc13d3d97ca
published URL: http://marina-sailing.webflow.io/

<style>
.w-slider-nav {
    font-size: 4px;
}
.w-slider-dot.w-active {
    width: 15px;
    height: 15px;
    background: none;
    border: 3px solid white;
    top: 3px;
}
</style>

Also, feel free to contact me for further code help and/or customization of third-party plugins

7 Likes

oh cool @samliew! It looks like a custom code ))
I have pasted it, have a look please, couse nothing has changed with my dots (

a note: the first portion of the custom code was pasted before, to change the input field style. I pasted your code before the style tag, have no idea was it correct or not, but actually I tried different options where to paste it :slight_smile: Please improve my mistake.

Did you check it in the browser? Custom code is not reflected in the Webflow editor.

This is an override, so you might have to paste it in the footer code instead. You will also need to publish and view the site in your browser; this cannot be seen in the designer, unless you use embed component.

1 Like

Pasted in the footer code, of cause published… and certainly checked it in the browser @DFink :slight_smile:
The dots didn’t change. I have just got a line of this code in the top of my home page

Ho ho! I have added a “style” tag to your code! (sorry have lost it) and it works now!!!

Hey, how powerful I could be if I could code like you!
Thanks @samliew !!! Now I am going to try to adjust a bit your code )))

1 Like

Cool! I have changed a size a bit

Can I make the dot not transparent somehow?

Add this additional style

.w-slider-dot {
    background-color: white;
}

Also, feel free to contact me for further code help and/or customization of third-party plugins

1 Like

Perfect @samliew!!!
Many many thanks for your help!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.