禁用 Materialise Carousel 上的 Touch

Question

It looks like no one has asked this question before since I've pretty much scoured the internet looking for a very simple answer.

How would one go about disabling the ability to swipe left/right on the materialize carousel?

Answer 1

in Materialize.js add/edit:

var allowCarouselDrag = true;
value: function _handleCarouselDrag(e) {
    if(allowCarouselDrag){
       ....
    }
}

You can set the allowCarouselDrag variable per application.

Answer 2

I solved it like this

// Create carouser
$('#carousel').carousel({
            fullWidth: true,
            indicators: false,
            duration: 100,
        });

// Get instance of carousel
carouselInstance = M.Carousel.getInstance(sliderDOM);

// Remove event listeners added by Materialize for corousel
document.getElementById("carousel").removeEventListener('mousedown', carouselInstance._handleCarouselTapBound);
document.getElementById("carousel").removeEventListener('mousemove', carouselInstance._handleCarouselDragBound);
document.getElementById("carousel").removeEventListener('mouseup', carouselInstance._handleCarouselReleaseBound);
document.getElementById("carousel").removeEventListener('mouseleave', carouselInstance._handleCarouselReleaseBound);
document.getElementById("carousel").removeEventListener('click', carouselInstance._handleCarouselClickBound);

After that drag/swipe is disabled and you can still change page/item via

carouselInstance.set(0);

and

carouselInstance.next(0);

Answer 3

This is far from a perfect solution, and it might disable too much of the functionality in your case, I'm not sure. An option to turn this on/off would be much appreciated.

But for my needs, turning off the events on the carousel did the job:

var carousel = $('.carousel.carousel-slider').carousel();
// Disable all swipping on carousel
if (typeof window.ontouchstart !== 'undefined') {
    carousel.off('touchstart.carousel');
}
carousel.off('mousedown.carousel');

Answer 4

function tap(e) {

    pressed = true;
    dragged = false;
    vertical_dragged = true;
    reference = xpos(e);
    referenceY = ypos(e);

    velocity = amplitude = 0;
    frame = offset;
    timestamp = Date.now();
    clearInterval(ticker);
    ticker = setInterval(track, 100);
}

Answer 5

I have attempted to solve this problem for the past ~three days and have come to the conclusion that there is no clean solution other than directly editing the materialize.js file as in Lester's answer. Unfortunately, this is not an ideal solution as it causes issues when updating Materialize etc.
The simplest solution that I have come up with after this time is the following piece of javascript:

window.onload = function() {    
    window.mouseDownNow = false;
    // The selector below must be more specific than .carousel.carousel-slider in
    // order for the event to be cancelled properly.
    $('.class-added-to-block-swiping-functionality')
    .mousedown(function() {
        window.mouseDownNow = true;
    })
    .mousemove(function(event) {
        if(window.mouseDownNow) {
            event.stopPropagation();
        }
    })
    .mouseup(function() {
        window.mouseDownNow = false;
    });
};

This will simply stop the event from bubbling to the Materialize swiping functionality.
Note: I am not sure how specific the selector must be, mine were classes that were specific to text areas.