Streaming live at 10am (PST)

Edit Slider arrows and buttons


#1

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?
#2

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


Responsive Product Slider
#3

Thanks very much for the help!


#4

@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:

<style>
.w-slider-dot {
  background: teal;
}
.w-slider-dot.w-active {
  background: aqua;
}
</style>

Hope that helps!
-Dan


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

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


#6

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


#7

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


<style>
.w-slider-dot {
background: teal;
}
.w-slider-dot.w-active {
background: aqua;
}
</style>

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.


#8

tried what u said. still nothing frowning

https://webflow.com/design/yspn?preview=115ba4fba7eb3ad6e865a36bbc654987

have a look and see what i did wrong.


#9

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


#10

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
https://webflow.com/website/luis-rivas-cano

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

Thanks in advance wink


#11

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 ;)


#12

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?


#13

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

Thanks a lot!


#14

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


#15

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.

http://tutorials.webflow.com/courses 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


#16

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

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

#18

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

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


#19

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;
}


#20