react-responsive-carousel

react-responsive-carousel copied to clipboard

Am I doing something wrong or is this the behaviour that is expected? I use the following Setup for my Carousel:

When using this Carousel on my Website, using a phone, if i want to swipe to the next picture, the whole website scrolls. I would expect, that if i scroll on the Carousel itself, that in my case vertical scrolling on the website does not work anymore and im kind of stuck with scrolling. Is there a way or a good workaournd to get this behaviour?

<Carousel className={"imageCarousel"} autoPlay={true} axis={"horizontal"} showArrows={true} infiniteLoop={true} interval={3000} > ....

EDIT: maybe preventing the scrolling totally could lead to some breakings on a website, how about reducing the amount of vertical scrolling while scrolling on top of a carousel element?

Am I doing something wrong or is this the behaviour that is expected? I use the following Setup for my Carousel:

When using this Carousel on my Website, using a phone, if i want to swipe to the next picture, the whole website scrolls. I would expect, that if i scroll on the Carousel itself, that in my case vertical scrolling on the website does not work anymore and im kind of stuck with scrolling. Is there a way or a good workaournd to get this behaviour?

<Carousel className={"imageCarousel"} autoPlay={true} axis={"horizontal"} showArrows={true} infiniteLoop={true} interval={3000} > ....

EDIT: maybe preventing the scrolling totally could lead to some breakings on a website, how about reducing the amount of vertical scrolling while scrolling on top of a carousel element?

I don't think there is any specific prop that could 100% prevent from doing this, but I used preventMovementUntilSwipeScrollTolerance and this setting helped. You can adjust also swipeScollTolerance

Am I doing something wrong or is this the behaviour that is expected? I use the following Setup for my Carousel: When using this Carousel on my Website, using a phone, if i want to swipe to the next picture, the whole website scrolls. I would expect, that if i scroll on the Carousel itself, that in my case vertical scrolling on the website does not work anymore and im kind of stuck with scrolling. Is there a way or a good workaournd to get this behaviour? <Carousel className={"imageCarousel"} autoPlay={true} axis={"horizontal"} showArrows={true} infiniteLoop={true} interval={3000} > .... EDIT: maybe preventing the scrolling totally could lead to some breakings on a website, how about reducing the amount of vertical scrolling while scrolling on top of a carousel element?

I don't think there is any specific prop that could 100% prevent from doing this, but I used preventMovementUntilSwipeScrollTolerance and this setting helped. You can adjust also swipeScollTolerance

That fixed for me, added them both and put swipeScrolltolerance to 30. We had a fullpage herobanner slider on web and mobile and now I am able to scroll vertically and horizontally the page on mobile.

Am I doing something wrong or is this the behaviour that is expected? I use the following Setup for my Carousel: When using this Carousel on my Website, using a phone, if i want to swipe to the next picture, the whole website scrolls. I would expect, that if i scroll on the Carousel itself, that in my case vertical scrolling on the website does not work anymore and im kind of stuck with scrolling. Is there a way or a good workaournd to get this behaviour? <Carousel className={"imageCarousel"} autoPlay={true} axis={"horizontal"} showArrows={true} infiniteLoop={true} interval={3000} > .... EDIT: maybe preventing the scrolling totally could lead to some breakings on a website, how about reducing the amount of vertical scrolling while scrolling on top of a carousel element?

I don't think there is any specific prop that could 100% prevent from doing this, but I used preventMovementUntilSwipeScrollTolerance and this setting helped. You can adjust also swipeScollTolerance

That fixed for me, added them both and put swipeScrolltolerance to 30. We had a fullpage herobanner slider on web and mobile and now I am able to scroll vertically and horizontally the page on mobile.

  preventMovementUntilSwipeScrollTolerance={true}
      swipeScrollTolerance={30}

Thanks buddy, this helps me to prevent on mobile

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.