Slider revolution arrows dont change style

Support
#1

Hi there, im trying to create a slider with custom arrows or at least customized withing the functions it offers.

However, it creates very strange mouseovers and and style changes I make only apply to the arrow symbol itself, but the black(partially transparant) arrow background isnt affected at all! Whichever style I choose, the background is just square and semi transparant changing to non-transparant on mouseover.

So I cant customize them now because only 1 or 2 options actually work, none of them round like I want it.

[Album] Imgur

#2

Hi There,

Thank you for writing in, when you change the BG-Color and Hover-BG-Color to transparent did you check the corresponding check box?

screenshot

Please provide us a design of how do you want the arrow to be style in initial and hover state.

Cheers!

#3

Hi Friech, Yes I did do that. Unfortunately it did not work. Now I’d love to make the arrows Hephaistos style with a transparant background and a black arrow. on hover I’d like to be a black circle. If there’s a way to make it fade in that would be even better, then I’d want the background to be huge. It could fade like my menu does for example: www.brandontwerp.nl.

Thank you for helping me out here!

Kevin

#4

Hey Kevin,

Would you mind giving us WP admin credentials in a Secure Note so we could see what’s preventing the settings from working?

Thanks.

#5

sure! I’d be glad too

#6

Hi there,

Please add this to your slider’s custom CSS

.tparrows {
    -webkit-transition: all 1s;
    transition: all 1s;
}
.tparrows:hover {
    border-radius: 100px;
}

That should do it :slight_smile:

Cheers!

#7

Hi @Rad, thanks so much, this does make my arrows behave as they should, according to the settings in the slider. However, no that I’ve adjusted those settings to suit my needs, the transition went away. Any idea how to fix that? Thanks again for the fix!

#8

Hi There,

Can you clarify which transition. Please do give us what is expected output and how it is you’re seeing at the moment. I did compare your settings and to what is happening on the frontend and it is showing as expected.

#9

Hi Lely,

Right now im seeing the arrows perfectly, on mouseover I get a big ass black circle which is great.

Your previous code was working, making the background fade-in. Thats what I wanted, but when I changed the settings on the slider without changing the CSS it stopped fading in. It had a fade of 1s.

So to clarify, I want the mouseover circle to fade in during 1s. right now its not fading.

#10

Hi There,

Thank you for the clarification. I can see the issue now. See below:

That part of the code is Javascript/Jquery code and should be added on Custom Javascript textarea instead. You have added it on Custom CSS. Since CSS doesn’t know how to process javascript code, it will then be considered syntax error. Once CSS encountered syntax error, any CSS after this will stop working. Move that code to custom JS and it will work as expected.
Hope this helps.

1 Like
#11

@Lely, ah I’m such a fool, could’ve spotted that myself… Its now working like a charm! Thanks so much!

#12

On behalf of my colleague, you’re welcome. Cheers!