MaterializeCss轮播无法在移动设备

Question

我在项目中使用angular2-materialize。

我的旋转木马在桌面上运行良好，但在移动设备中不会滑动。

我已经尝试了文档中的所有示例，但我得到了相同的结果：适用于桌面设备，但不适用于移动设备。

app.component.ts

import { Component, AfterViewInit } from '@angular/core';

declare var jQuery: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  /* Materialize CSS Plugins */
  ngOnInit() {

    jQuery(document).ready(function() {

      //Initialize collapse button
      jQuery(".button-collapse").sideNav();
      // Initialize collapsible (uncomment the line below if you use the dropdown variation)
      jQuery('.collapsible').collapsible();

      //Initialize carousel
           jQuery('.carousel').carousel({
            dist:0,
            shift:0,
            padding:20,

      });

    });
  }
}

横幅carousel.component.html

  <div class="carousel">
    <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
    <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
    <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
    <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
    <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>
  </div>