I am trying to create an effect where I have a link appear and disappear on when clicking the arrows in a slider. I am going to be reusing this component in several places, and am trying to reuse my interaction.
What I have is a mouse click trigger on the arrow right (.right-arrow-conditional), with an effect to hide my chevron targeting the children of the class (.component_chevron-wide).
What I want to happen is for the chevron to be visible when .right-arrow-conditional is triggered, and hidden when .right-arrow-conditional is triggered.
This is for some reason not working
Then to add complexity, I am using the classes and children of the classes, as I am reusing my component in multiple places, and I want to have the same behavior in every component. I can only get it to work if I don’t use classes, but then I can’t reuse the component without having to recreate the interaction for each individual component
I have reused interactions before, following the same logic, without issue, so I am really stumped as to why it’s not working now. You can see what I’m trying to do in the carousels at the bottom of the page.