实现轮播箭头无法在移动设备上使用

Question

I have a full-width carousel using materialize with some arrows signaling next and previous carousel elements. Works great on desktop but they are not working on mobile. I have been researching it and supposedly there is a bug (no surprise) with this element that they have not covered up. I was wondering if anyone has ran into this similar problem and knew a way around it? The following code worked for one individual just not for me:

function setupEvents() {
    if (typeof window.ontouchstart !== 'undefined') {
        view.on('touchstart.carousel', tap);
        view.on('touchmove.carousel', drag);
        view.on('touchend.carousel', release);
    }
    view.on('mousedown.carousel', tap);
    view.on('mousemove.carousel', drag);
    view.on('mouseup.carousel', release);
    view.on('mouseleave.carousel', release);
    view.on('click.carousel', click);
}

On mobile it can be dragged just not able to be initiated by clicking the buttons.

Answer 1

You need to replace that code snippet in materialize.js (0.100.2)

host the materialize files locally so you can customize it.

search for this implementation in it.

function setupEvents() {
    if (typeof window.ontouchstart !== 'undefined') {
        view.on('touchstart.carousel', tap);
        view.on('touchmove.carousel', drag);
        view.on('touchend.carousel', release);
    }
    view.on('mousedown.carousel', tap);
    view.on('mousemove.carousel', drag);
    view.on('mouseup.carousel', release);
    view.on('mouseleave.carousel', release);
    view.on('click.carousel', click);
}

replace the above code ^ with the code given below:

function setupEvents() {
    if (typeof window.ontouchstart !== 'undefined') {
       view[0].addEventListener('touchstart', tap);
       view[0].addEventListener('touchmove', drag);
       view[0].addEventListener('touchend', release);
    }
    view[0].addEventListener('mousedown', tap);
    view[0].addEventListener('mousemove', drag);
    view[0].addEventListener('mouseup', release);
    view[0].addEventListener('mouseleave', release);
    view[0].addEventListener('click', click);
}

Everything should now be working as expected.

Reference & thanks to ddiaz914 for the fix. github issue #5052