1

I noticed when using Owl Carousel 2, while slide the item in mobile viewing, the browser also can be move up and down. Try to disabling the scroll function when trigger the Owl Carousel 2 prev and next function in mobile but it still doesn't work.

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:5,
    nav:true,
    items:2,
});
// $('.owl-carousel').bind("mousewheel", function() {return false;});
$('.owl-carousel').bind('touchmove', function(e){e.stopPropagation(); alert('allow scroll');});

Appreciated the answer from expert out here.

Thank you.

5 Answers 5

2

I made this work with the help of OwlCarousel2 events.

There are 2 events we can use together for this purpose:

  1. drag.owl.carousel fires when user start to drag
  2. dragged.owl.carousel fires when dragging finished

And this make it work like how we want it:

var owl = $('.owl-carousel');
owl.owlCarousel({
    //  your options
});

owl.on('drag.owl.carousel', function(event) {
    $('body').css('overflow', 'hidden');
});

owl.on('dragged.owl.carousel', function(event) {
    $('body').css('overflow', 'auto');
});

So; it use css overflow to disable scrolling when dragging started and enables it back when it finished.

0
1

This works on iOS & VueJS.

var owl = $('.owl-carousel');
    owl.owlCarousel({
    //  your options
})

// disable scroll
owl.on('drag.owl.carousel', function(event) {
    document.ontouchmove = function (e) {
        e.preventDefault()
    }
})

// enable scroll
owl.on('dragged.owl.carousel', function(event) {
    document.ontouchmove = function (e) {
        return true
    }
})
1

look for the below piece of code in custom.js file of your project

Owl.Defaults = {
        items: 3,
        loop: false,
        center: false,
        rewind: false,

        mouseDrag: true,
        touchDrag: true,} 

change the things to below:-

touchDrag:false,

and owl-carousel will simply stop scrolling horizontally both on mobile and desktop drag!

1

For owlcarousel2, you can use mouseDrag option.

$('.owl-carousel').owlCarousel({
    mouseDrag:false
});

Reference https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

0

in owl.js

mouseDrag: false, touchDrag: false, pullDrag: false, freeDrag: false,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.