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

[lholdingfoundry]

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!

[martinkariuki7]

I have the same issue

[martinkariuki7]

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

[mrjosshi]

could you please share the code

[denisbosire]

@martinkariuki7 solution helped.

[exilvm]

any news about this issue?

[exilvm]

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;
}

[exilvm]

Also @martinkariuki7 's answer is not a good approach since disabling touchDrag/mouseDrag will affect all the devices, and this issue is about mobile devices with touch screens, i know you can achieve it by sniffing the user agent, but sniffing browser's UA in 2018 is the worst idea i guess.

[spandan888]

@ExillustX that solves the issue. thanks!

[gecsegdaniel]

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
          }
        }
      });

[pascalporedda]

(Sorry about the canned reply.)

You have not added a link to a working live example. See CONTRIBUTING.md.

Please add a link to a page where I can verify this error. You can use a service like jsfiddle, plnkr, jsbin or codepen.

And make sure you're using the latest Owl Version!

[pascalporedda]

As far as I can see this is related to using a full screen slider, if that is the case the answer is already proposed by ExillustX simply override the css touch-action to auto or pan-y

[samadhiLGN]

@ExillustX awesome man its work 👍

[rohankhudedev]

For version 2.3.3: Above CSS fixed by issue. But by setting mouseDrag to false and touchDrag to true it didn't worked.

[gleenk]

In 2.3.3 is still bugged. In 2.3.4 it works.

[ritsrivastava01]

Thx @ExillustX its fixed my issue as well. 👍

[realaaz]

@ExillustX's fix works for me in iOS & Android, on Safari, Chrome, and native browsers. Thank you a lot! 👍

[boesbo]

@ExillustX's fix works for me in iOS & Android, on Safari, Chrome, and native browsers. Thank you a lot! 👍

On iOS it's impossible.

[jkhhihi]

It is not working.
Still it is up and down on mobile device.
Even owlCarousel website slide
check it out https://owlcarousel2.github.io/OwlCarousel2/
on your mobile phone.
When you swipe, the screen is up and down as you see OwlCarousel website slides.
(Even 2.3.4 that i tried)

[nuriye]

I am using 2.3.3 - the css variation did not work, but the js did. But on another Website the css variation worked. Strange. :) But thank you!

[korvictech]

Thanks

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 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;
}

It worked for me. Thanks

[fikar46]

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

this is work for me

var carousel = function() { $('.mypage-slider').owlCarousel({ loop:true, autoplay: true, margin:0, animateOut: 'fadeOut', animateIn: 'fadeIn', nav:false, autoplayHoverPause: false, items: 1, touchDrag:true, mouseDrag:false, navText : ["<span class='ion-md-arrow-back'></span>","<span class='ion-chevron-right'></span>"], responsive:{ 0:{ items:1 }, 600:{ items:1 }, 1000:{ items:1 } } }); }; carousel();

[yasineryigit]

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 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;
}

It worked. Thanks a lot :)

[AjithPG]

@ExillustX Thanks for your solution it worked.You are awsome

[doddannad]

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 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;
}

thank you soo much you did greate job

[xarala221]

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
}
}
});

This works for me!

[rolfo85]

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; }

[codegreenie]

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

This is a Life Saver. Thank you very much

[harryliangye]

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;
}

That worked really good for me!

Many many Thanks!

[Sihap06]

thx. its work for me

[Eblazecode]

thanks @martinkariuki7. This really worked for me . You saved from a whole lot of stress
.owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item{
-ms-touch-action: auto;
touch-action: auto;
}

[aafmj]

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;
}

Thank you !! it works..

[XtremerX]

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;
}

Thanks Buddy <3

[exilvm]

No problem guys. Glad I was helpful!

[SurajanShrestha]

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

@martinkariuki7 Thanks Man...This Solution Worked :)

[daviddagb2]

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

This answer help me a lot, thanks

[anubhav15896]

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;
}

This Works for me. Thanks ExillustX.

[Yesid-Rodelo]

@ExillustX 2020 and your solution it is still the best and simplest solution thanks!

[ioktar]

4 saat bu sorunu çözmeye çalıştıktan sonra ... nihayet bir düzeltme buldum , owlCarousel CSS'nin bu 2.2.1 sürümünü kullanarak bir düzeltme gibi görünüyor, bu nedenle bu sorun hiç de ciddi değil, sadece hatalı bir css dosyası. v2.2.1 CSS dosyasını v2.3.0 JS dosyası ile birlikte kullanmanın dezavantajlarından da emin değilim. her neyse, birisinin soruna 2.3.0 sürümünde hangi CSS özelliğinin neden olduğunu bulması, ardından düzeltmesi ve bir push isteği göndermesi gerekiyor, üzgünüm ama bunun için zamanım yok.
Güncelleme: Tüm CSS dosyasını eski bir versiyonla değiştirmek yerine, sizin için kolaylaştırdım, sadece bu kodu CSS'nize ekleyebilirsiniz ve sorun giderildi.
Kod:

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

solution is successful. Thank you

.owl-carousel.owl-drag .owl-item{
-ms-touch-action:auto;touch-action:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}