实现滑动动画

Question

我的网站页面上有问题。本质上，我正在尝试使用内容固定的Materialize轮播。其他几个动画也发生了相同的问题，但我无法修复它。本质上，每当我使用JS初始化轮播时，动画就会变得非常缓慢且笨拙。请参见示例here。

HTML：

<div class="carousel carousel-slider">
    <div class="carousel-fixed-item center">
        <a class="btn waves-effect white grey-text darken-text-2">button</a>
    </div>
    <div class="carousel-item red white-text" href="#one!">
        <h2>First Panel</h2>
        <p class="white-text">This is your first panel</p>
        </div>
    <div class="carousel-item amber white-text" href="#two!">
        <h2>Second Panel</h2>
        <p class="white-text">This is your second panel</p>
    </div>
</div>

JS：

document.addEventListener('DOMContentLoaded', function() {
   var elems = document.querySelectorAll('.carousel');
   var instance = M.Carousel.init(elems, {
      fullWidth: true,
      indicators: true
   });
});

我通常不使用JS编程，所以如果我做错了事，请原谅我。但是有人可以帮我吗？