I have created a 4 image slider and all is working fine but am trying to style the slider nav arrows that are ‘inactive’. I realise I can remove these inactive arrows with ‘hide at each end’ box in the slider settings but I want these inactive arrows visible within the slider but would like to lower the opacity of them, so they dont stand out as much as the active arrows.
Would be interested to see if anyone has any found a way around this.
Hi
Google is maybe your friend but the webflow university should be your home…
There is A way, Try to find the answer here
Thanks but been there and spent the morning on google, but didnt help my query im afraid. I am trying to style the ‘inactive’ arrow rather than ‘Hide at each end’.
“First and last slide arrows - turn off the left arrow on the first slide and the right arrow on the last slide.”
I dont want to turn them off I want to style these ‘inactive’ arrows differently to the ‘active’ one rather than hide them.
You can style the Arrow, if that is what you want. take a look at this video
Can you share the read only link to your project?
I cant share the link due to client confidentiality - but have created an image below on what im trying to achieve.
@shokoaviv Jason just wants to style the next and previous buttons when they are at the end of a slides from each side, there is not much you can see in their read-only 
@Jason_Wintermeyer What you want to do is impossible with webflow itself - there is simply no separate class for the “edge arrows”. Also even if you were to be able to target arrows when they are at the edges you’d have to make them unclickable with script also.
Maybe someone with good scripting knowledge may chime in.
edit: I am curious why do you want to have such behaviour? Disabled elements usually tell people that in some circumstances what they are trying to do it possible but not currently. In your case the only limiting factor that won’t allow for clicking on the arrow would be you disabling the click, which means that this is by design, and the action of going from the last slide to the first or vice versa will never be possible, hence there is no point in an UI element which could never be used.
Thanks dram. Just to clarify I dont want the ‘hidden’ arrow element to be disabled, I just want the arrows to be slightly different in appearance, so the user knows which direction the slider story starts/ends in.
I think it is better to tell the sequence order with the variations of dots. Unless your slider is not your regular slider but some sort of a storytelling mechanism, at which point you should be better off with creating your own slider from scratch.
For future reference, if anyone else looks for the solution…
Of course, it’s perfectly possible in Webflow. Moreover - it’s pretty simple.
Actually, @Jason_Wintermeyer already found the most important part of the solution himself - you can use the ‘hide at each end’ option for nav arrows. And if you hide an element, it means you are uncovering whatever is below it. So:
Added bonus is - when the actual button disappears and uncovers the pseudo-button, you get a regular cursor instead of a hover pointer (because it’s a div, not a link), and it isn’t clickable. No scripting knowledge needed
The caveat is - nav buttons have to have a solid color background (to cover pseudo-buttons).
Brilliant and simple solution! 
Here is the simple code for inActive Arrow styling
.your-slider-arrow-class[style*="display: none;"] {
display: block !important;
/* Your custom styling for the disabled arrow */
}
Note:
you can use display: flex etc as per your design.
Solution Credit:
Matías Pitters•