search

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.91k stars 177 forks source link

Nested embla carousel - child carousel is causing parent carousel to scroll on drag #141

Closed lmcq closed 3 years ago

lmcq commented 3 years ago

Hi,

This is a bit of a unique use case, but we need to nest a carousel within a carousel slide (we've essentially got a carousel of cards, and within each card is a carousel of images).

When we drag the slides for the inner carousel, then we don't want the event to bubble up to the parent carousel and therefore cause that to scroll too. However, it seems that attempting to drag the inner carousel also causes the parent to scroll.

I've created a minimal repro here: https://codesandbox.io/s/nested-embla-bvo96

Interestingly, it seems that events are successfully being prevented from propagation (clicking outside the inner carousel logs out "mouse down", but inside of it does), but the parent carousel still scrolls.

This could just be an implementation error on our side.

Great library, thanks!

davidjerleke commented 3 years ago

Hi Lewis (@lmcq),

Thank you for your question. Embla Carousel has no official support for nesting carousels, but I’ll try an unofficial way to achieve what you want.

I’ll let you know when I’ve done so.

Kindly, David

lmcq commented 3 years ago

Great, thank you @davidcetinkaya!

davidjerleke commented 3 years ago

Hello Lewis (@lmcq),

Just wanted to mention that the pressure on this lib is high right now (I'm also the sole maintainer of this project), so I don't know when I will have the time to look into this. I thought it would be good to mention that so you can look for alternatives if you need this feature soon.

I hope you understand.

Best, David

lmcq commented 3 years ago

Ok, no problem - thanks for your response!

davidjerleke commented 3 years ago

Hi Lewis (@lmcq),

So I finally got half an hour to create an example for you. Here's the CodeSandbox with nested Embla Carousels.

Please let me know if you're intending to check this out or not. Anyone else reading this - Feel free to try this out and let me know how it goes.

Best, David

lmcq commented 3 years ago

Hi David,

That works great! We'll definitely be looking at using this. Thanks for taking the time to create this

Apologies for not getting back to you earlier

Thanks, Lewis

davidjerleke commented 3 years ago

Thank you for your response and thanks a bunch for supporting this project Lewis (@lmcq) 👍🏻. I’m closing this issue as resolved then. Let me know if you run into any issues with the implementation.

Enjoy, David

davidjerleke commented 10 months ago

See this gist for nested carousel using v8.