在MaterializeCSS轮播中禁用点击滚动

Question

我有一个materializecss轮播，一次显示3个项目。如果用户单击当前不在中心的项目，则轮播会滚动。我希望用户能够与该项目进行交互，而无需滚动到中心。如何禁用滚动居中？

<ul class="carousel">
            <li class="carousel-item"><div class="scenario-item card-panel hoverable">
    <button class="close-button btn-flat">X</button>Item 1
</div></li>
            <li class="carousel-item">Item 2</li>
            <li class="carousel-item">Item 3</li>
            <li class="carousel-item">Item 4</li>
            <li class="carousel-item">Item 5</li>
            <li class="carousel-item">Item 6</li>
            <li class="carousel-item">Item 7</li>
        </ul>
        <button id="next">Next</button>

<script>
        $(document).ready(function(){
            $('.carousel').carousel({ dist: 0, indicators: true, noWrap: true });
            var instance = M.Carousel.getInstance($('.carousel')[0]);

            $('#next').on('click', function () {
                var instance = M.Carousel.getInstance($('.carousel')[0]);
                instance.next();
            });
        });
</script>