Streaming live at 10am (PST)

Edit Slider arrows and buttons


Can I change the colour of the arrows or round buttons in the slider or do I have to replace them?

Making the slider transparent
Any way to style slider navigation dots using code or a creative workaround?
Change slider navigation styling

Replace. It's \e600 from their icons. You can replace it with SVG so you can change it's color later.

Responsive Product Slider

Thanks very much for the help!


@Boustfield For the slider arrows, you can simply change the Font Color of the arrow element, by styling it in webflow.

The round dot buttons are a bit more complex, and although we cannot style them in the webflow editor, you can add a custom HTML Embed to apply your own custom colors. For example, if you insert this into an HTML embed on your page, the dot colors should change:

.w-slider-dot {
  background: teal;
.w-slider-dot.w-active {
  background: aqua;

Hope that helps!

Slider arrows and how to customise those
Slider "Nav-Circles" color change
Making the slider transparent
Slider arrows sometimes don't work (solved)

Oh I didn't know that! But that makes sense @danro! That icon is a font undoubtly ;D


@thesergle tried that, didnt work. frowning are u supposed to change the .w-slider-dot to your own custom class?? i don't know programming...


No @Amreet_Gill you just paste this code in your custom code page of your site settings:

.w-slider-dot {
background: teal;
.w-slider-dot.w-active {
background: aqua;

And then replace teal with whatever color you want your dot to be and replace aqua with what color you want your active dot to be. You can find the exact color in Webflow color picker and past the "#ababab" color value there too.


tried what u said. still nothing frowning

have a look and see what i did wrong.


It wouldn't show the changes inside the designer. Only when you publish your site.


Hi! I have the same problem, the buttons are the same style, white or black.

I've added the style but I don't know why doesn't work.

Here you go the webflow site

I would like change the fill and put other border color...

Thanks in advance wink


Hi @jselva
That is because you are using inverted option for colors. Remove inversion tick on Slider in Webflow Designer Mode and it will be all fine ;)


Nice! I thought the changes would be displayed in Designer Mode, once I've published I've saw the changes smile

I would like increase the buttons size, how can I do?


OK, I've added "font-size: 20px;" attribute and works fine smiley_cat

Thanks a lot!


What's the hook when targeting the inverted active class?


Just in case you were wondering... it is MUCH easier than you you think. No coding required. You can edit the slider navigation, add your own images instead of the chevrons, etc. You can even edit the selectors. is where you can find the tutorials for this and much more.

Also, up until recently (this week) they had a vimeo page with A LOT more videos... but that seems to be void of all videos except one now. Maybe if an admin sees this, they can get that fixed. It was a GREAT additional resource, that is now gone. frowning


To change the dot image like the arrows where a nice feature for next updates. have anyone heared something about a next webflow update?

How to style slider menu buttons

.w-slider-nav-invert>div.w-active {
background: #FFD001;
border: 2px solid #FFD001;
.w-slider-nav-invert>div {
background: #ffffff;
border: 2px solid #979797;


And if you also want a hover effect for the buttons, just try:

.w-slider-dot:hover {
background: red;


Change color of slider dots:

.w-slider-dot {
background: #cccccc;
.w-slider-dot.w-active {
background: #06d6a0;

Change color of arrow symbols:

[class^="w-icon-"], [class*=" w-icon-"]{
color: #ddd;

closed #20