Disable Touch on Materialize Carousel

问题

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?

回答1:

in Materialize.js add/edit:

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

You can set the allowCarouselDrag variable per application.

回答2:

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

回答3:

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

回答4:

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.

来源：https://stackoverflow.com/questions/43723935/disable-touch-on-materialize-carousel

标签

javascript

html

materialize