Have button seen as active when slide is shown

[bblizrd]

Hello, I hope you are well. I was wondering if there’s a way to have a button shown as active when a slide is presented.

So for example, on Button #1, I added this: https://share.getcloudapp.com/DOuKo7Br, but would like the interaction settings to be seen as active when Slide #1 is shown/active on the screen as well. Not just when you click on it. Kind of like with pagination where the highlighted circle stays on when the slide is on.

I hope I’m making sense, if not please feel free to let me know and I’ll try to clarify further.

[tristup]

Hi Alicia,

Thanks for reaching out.
The issue required some more clarification for further assistance. I would also suggest you share the exact page URL along with WordPress admin credentials to check the settings.
Please provide login credentials for your site in a secure note, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– Specific page URL where you have added this slider.

To create a secure note, click the key icon underneath any of your posts.

NOTE: Please change the Data-x-slide-goto to data-x-slide-goto.

Thanks

[bblizrd]

Hello, the secure note has been added to the thread. Please let me know if you need any additional assistance with accessing the site/page.

[ruenel]

Hello Alicia,

You are using custom navigation. To be able to accomplish what you have in mind, you need to apply custom CSS. Check out this thread for your reference:

• {{dc:rvt:outlet state="slider" key="current"}}

Your custom button must have a custom class so that you can use it in your custom CSS:

Based on the thread, you can have something like:

[style*="current: 4"] .brakes{
    /* the custom styling here */
}

Be advised that custom CSS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Hope this makes sense.

[bblizrd]

Thank you for your reply. I saw that you had added some CSS to the page, but the desired effect doesn’t appear to be working here: https://share.getcloudapp.com/DOuK2rPy. It seems to only work within the editor. Do you know why that could be?

[ruenel]

Hello Alicia,

I found out that the builder automatically optimizes the results which removes the space in the code. Therefore, you will have to place your custom CSS code in Appearance > Customize > Additional CSS instead.

Best Regards.

[bblizrd]

Thank you, for your help, I really appreciate it.

[ruenel]

You are most welcome, Alicia.