How to make arrow on hover keep showing in product carousel

Attached screenshot of what I want to stay and not hide when mouse moves away

Attachments:

You must be logged in to view attached files.

Hello,

Could you please share the page URL on which you have that “Product Carousel”, along with your site WP Admin URL and Credentials under the private content area of this topic?

And please also confirm that you want: “arrows of the carousel always display when moving hover or not” right?

Best Regards,

Yes I want it to always show in ony the products carousels if you can please share with me custom css i can add, added wp info in the private content

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-nav-arrows.wd-hover-1.wd-pos-sep .wd-next, .wd-prev {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

Best Regards,

Thank you for that but this is applying to all carousels I want it just for the products items

Hello,

Your given login details are not working anymore. Please share the correct login details so I can check the issue and give you a possible solution.

Best Regards,

Shared now

Hello,

Your issue has been resolved. I have added the following custom css code in Theme Settings > Custom Custom.

 .wd-carousel-item .wd-nav-arrows.wd-hover-1,.wd-pos-sep .wd-next, .wd-prev {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

Check back your site and check the issue.

Best Regards,

Hello thank you for your time, but no the arrows are still showing on all carousels (Shop by category,shop by brand, blog..) I want it just for Products Carousels

Hello,

You have added custom CSS in Theme Settings > Custom CSS as well as in the Custom CSS & JS plugin.

Try removing the code from these locations and instead, add the custom CSS class directly through the Advanced tab of the Elementor Carousel widget where you want.

See Screenshot for clarification: https://ibb.co/Kx2YkmrS

Best Regards,

Hello thank you again, i removed it from custom css and custom css & js plugin and added it manually in the advanced tab but its still applying to entire page here’s screenshot:
https://ibb.co/zWvJdtn1

Hello,

Now I have removed the custom css code from the Elementor and the arrow keeps showing without hover. Please remove all the custom css for the carousel where you are using so I will further check on your site and give you a possible solution.

Best Regards,

Hello Aizaz,

The arrows aren’t showing anymore anywhere and don’t have any custom css thank you awaiting your update

Hello,

You can target the specific Product Carousel using its ID by adding the following CSS:

div#carousel-743 .wd-nav-arrows.wd-hover-1,  
div#carousel-743 .wd-pos-sep .wd-next,  
div#carousel-743 .wd-pos-sep .wd-prev,
div#carousel-382 .wd-nav-arrows.wd-hover-1,  
div#carousel-382 .wd-pos-sep .wd-next,  
div#carousel-382 .wd-pos-sep .wd-prev {  
    opacity: 1 !important;  
    visibility: visible !important;  
    transform: none !important;  
}

This should ensure the arrows stay visible only for the Product Carousels and not other sections like “Shop by Category” or “Blog.”

Best Regards,

I really appreciate all the help but it still doesn’t work tried adding it in custom css and in advanced elementor css for selected section. Attached login access again.

Thank you

Hello,

Your issue has been resolved.

I have assigned the necessary custom class to the relevant elements on your homepage and applied the required CSS. Now, the carousel arrows should work without hovering as expected.

See Screenshots for clarification:
https://ibb.co/jPQSYdmd
https://ibb.co/fYp0Qd10
https://ibb.co/SDrypcXj

Best Regards,

Amazing worked! Thank you alot!!

Hello,

You’re very welcome! I’m glad I could help. If you need anything else, feel free to reach out!

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards,

[Author]

Posts