禁用 Materialise Carousel 上的 Touch

Question

看起來以前沒有人問過這個問題，因為我已經在互聯網上搜索了很多尋找一個非常簡單的答案。

如何禁用在實體化輪播上向左/向右滑動的能力？

Answer 1

在 Materialize.js 添加/編輯：

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

您可以為每個應用程序設置 allowCarouselDrag 變量。

Answer 2

我是這樣解決的

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

在禁用拖動/滑動之后，您仍然可以通過以下方式更改頁面/項目

carouselInstance.set(0);

和

carouselInstance.next(0);

Answer 3

這遠不是一個完美的解決方案，它可能會禁用您的情況下的太多功能，我不確定。 非常感謝打開/關閉此功能的選項。

但對於我的需要，關閉旋轉木馬上的事件完成了這項工作：

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

在過去的三天里，我一直試圖解決這個問題，並得出的結論是，除了像 Lester 的回答那樣直接編輯 materialize.js 文件之外，沒有其他干凈的解決方案。 不幸的是，這不是一個理想的解決方案，因為它會在更新 Materialise 等時導致問題。
在此之后，我想出的最簡單的解決方案是以下 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;
    });
};

這將簡單地阻止事件冒泡到 Materialise 滑動功能。
注意：我不確定選擇器必須有多具體，我的是特定於文本區域的類。