Streaming live at 10am (PST)

How to emulate an Airbnb style slider within a card?

Hi everyone,

I was wondering if I could get some advice for how to create a slider within a card, similar to an Airbnb listing.

The behavior that I’m looking to emulate is how the entire listing card is clickable and will take you to the listing page, but when you click on just the slider control arrow it instead cycles through the listing images and does not trigger the link to take you to the listing page.

You can see what I’m talking about by visiting Airbnb.

I’ll also try to explain it with screenshots here –

Everything within the red box is clickable and will take you to the listing page

But when you click on the slider control, it does not trigger the link and instead cycles through images directly within the card.

My issue is that even though I can embed a slider within a card in Webflow I can’t seem to get it to not trigger the card link when clicking on the slider control. I thought I could get around this with Z-index but that doesn’t seem to do anything.

You can view my read only link

Excuse the mess of the project I’m just trying to prototype some things out at the moment. The area in question is the first card.

Just want to bump this

hi @alexalspaugh your Div Block 2 is link block so when you click on element it will direct you to other page. All you need to do is convert this element back to standard div.

Hi @Stan thanks for the reply!

The issue is that I want that to remain a link block, the card still needs to behave as a link but I want a slider to be embedded within it. The issue is that when I click on the slider controls it triggers the link.

In the airbnb example, the slider controls can be clicked without triggering the link but when you click anywhere else in the card the link functions as normal. That’s the behavior I’m looking to replicate here.

Let me know if you have any more ideas.

Thanks!

HI @alexalspaugh
EDIT: I had an idea how it can be done and here is short video how to create this in WF.

hi @alexalspaugh if your issue doesn’t persist feel free to close your request as solved