Help with custom image slider interaction

Design help Animations & Interactions
1

Hello Webflow community,

I’ve created a custom slider cursor interaction on my homepage, and it works perfectly at first. However, the sliders are nested inside a tab setup, and once I switch to another tab, the right side of the cursor interaction stops working.

This has me stumped because everything functions as expected when the page first loads, but after switching tabs, the interaction breaks.

My setup consists of two separate cursors—one with a right arrow and one with a left arrow. I’ve configured the interactions to trigger when hovering over the left and right arrow divs within the slider.

If anyone has insights into what might be causing this issue or how to fix it, I’d really appreciate your help!

Thanks in advance!

You can see an example of what I’m trying to achieve on this site: Architecture and interior design studio ◾ MAKHNO Studio

Here is my public share link: Webflow - Trü Architectural

2

Hi there,

Cursor interaction issues after switching tabs can often be related to custom cursor settings or JavaScript interactions. Here’s how you can troubleshoot this:

Custom cursors in Webflow can be configured through the Style panel > Effects > Cursor. If you’re using custom cursor implementations, ensure that your cursor-related classes and interactions are properly maintained across different states and page loads.

For testing your cursor functionality:

  1. Use Preview mode to check if the issue persists
  2. Clear your browser cache and reload the page
  3. Check if any custom code or interactions might be conflicting with the cursor behavior
  4. Verify that cursor-related classes are consistently applied across different viewport sizes

For more detailed information about implementing and troubleshooting custom cursors, check out A guide to custom cursors in Webflow.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like