Navigation icons over image (trying to make image slider)

Greetings!

I have a collection list with items from XANO, every collection item includes own Image, headers, etc.
I want to add slider functionality to slide images from collection list (add up to 6 images).

Please help to understand how to show navigation icons (arrows) when mouse hover over image (hidden by default)?
Because this is 2 different elements with Icon. I trying to do this many ways (hover states, JS), but it not working (

Снимок экрана 2024-07-28 в 11.26.46

Hey @alnkde :wave:
You have the Slider component made just for that. You can bind any collection to it and display their content!

Hi!

Yes, I see this component. By the way, I can’t add hover functionality to arrow buttons, when mouse is on image … Can you help me with this?

Hey @alnkde :slight_smile:
You can add a hover state to the slider. And apply the state to its children. When you do that, the arrow icon will inherit this state. You can then apply the properties you want!


CleanShot 2024-07-30 at 11.34.21

Does that answer your use-case?

Yes! This is what Im looking for ! Thanks a lot :smiley: