Streaming live at 10am (PST)

Slider dot colours

Hi everyone,

I’m trying to change the slider dot colours using a html embed element, I found a post in the forum (Any way to style slider navigation dots using code or a creative workaround?) and implemented what it said, but it didn’t work. I put the code in the embed, and also in the footer, but again, didn’t work unfortunately!

I want to change the slider dot colours to: #02F2B2 and I want one of the dots to appear bigger than the rest to indicate what slide the user is on.

Would appreciate the help!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Hello @Fatimah_N

I will share a video where you will see how to create absolutely custom dots. Give it a try and reach out if you want some help.

Piter :webflow_heart:

Pretty in-depth, thanks. If i just wanted to change the colour of the dots of the current slider though, instead of creating a brand new, custom one, is there a way of doing that by using a code embed?

If you pop an HTML embed on your page and include the following code:

   .w-slider-dot {background: #CAE5D7;}
   .w-slider-dot.w-active {background: #84C6A5;}

You can change the default dot colours for Webflow sliders really quickly.

My question: Can you change the colours of more than one default Webflow slider on a page, or do you have to build a custom one?