Streaming live at 10am (PST)

Custom dots in slide nav


#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 :slightly_smiling:
Many thanks!


Any way to style slider navigation dots using code or a creative workaround?
#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


#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 :slightly_smiling: 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.


#8

Pasted in the footer code, of cause published... and certainly checked it in the browser @DFink :slightly_smiling:
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 )))


#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


#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.