Custom dots in slide nav

Design help Custom code
1

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
2

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

3

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

4 
<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
5

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.

6

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

7

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
8

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

9

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
10

Cool! I have changed a size a bit

Can I make the dot not transparent somehow?

11

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
12

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

13

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