SolvedOwlCarousel2 Can't vertical scroll page on mobile devices with full height owl carousel

I have a 100vh height owl carousel slider in my header on mobile (Android/Chrome) but can't swipe to scroll down the page (touch event on top of slider). Side swipe to trigger slide transitions works fine but no page scrolling is happening on upward or downward swipe. Using version 2.3.0.

Any help appreciated! Thanks!

42 Answers

✔️Accepted Answer

After 4 hours of trying to fix this issue... i finally found a fix, using this version 2.2.1 of owlCarousel CSS, seems to a fix, so this issue is not serious at all, just a buggy css file. i'm also not sure about the disadvantages of using v2.2.1 CSS file along with v2.3.0 JS file. whatever, someone need to find out which CSS property in version 2.3.0 causing the issue, then fix it and send a push request, sorry but i don't have time for this.
Update: Instead of replacing the whole CSS file to an older version, i made it easy for you, you can just add this code to your CSS and the issue is fixed.
Code:

.owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item{
    -ms-touch-action: auto;
        touch-action: auto;
}

Other Answers:

I worked around the mobile issue by setting mouseDrag to false and touchDrag to true.

It worked for me in all device (mobile, tablet, PC). Based on @martinkariuki7 's answer. Standard setting for mouseDrag is false and for touchDrag is true. These need to changed on touch devices.

$(SELECTOR).owlCarousel({
        loop: false,
        margin: 15,
        nav: true,
        mouseDrag: true,
        touchDrag: false,
        navContainer: 'controls-class',
        dots: false,
        navText: ['', ''],
        responsive: {
          0: {
            items: 1,
            autoHeight: true,
            mouseDrag: false,
            touchDrag: true
          },
          600: {
            items: 1,
            autoHeight: true,
            mouseDrag: false,
            touchDrag: true
          },
          1050: {
            items: 3,
            autoWidth: true
          }
        }
      });

To me this didn't work

.owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item{ -ms-touch-action: auto; touch-action: auto; }

but this did work

.owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item, .owl-carousel{ -ms-touch-action: auto; touch-action: auto; }