Swiping through the carousel causes its parent to vertically scroll

This issue is a little tricky describe but when you see it, you can't "unsee" it!

Using the carousel on a real mobile device (I'm using an iPhone 12) is like trying to handle soap. The scrolling is very slippery & unforgiving. If your finger moves across the screen at a very slight diagonal, the entire page will scroll at the same time instead of staying fixed. It's extremely easy to trigger accidentally unless you're very meticulous to swipe completely horizontally.

See this [CodeSandBox](https://codesandbox.io/s/react-slick-playground-forked-jidyw) (demo link [here](https://jidyw.csb.app/)). The only thing I've done is add placeholder text above & below the carousel to more easily demonstrate the problem.

Compare with say, the carousels in [this page](https://www.airbnb.co.uk/s/homes?search_mode=flex_destinations_search&date_picker_type=flexible_dates) and you'll see you can be significantly more carefree in how you navigate through them. As a result, the experience feels more polished and natural.

Has anyone found a workaround for this?