Question

我相信我已经错误地初始化了我的代码，但我无法使Materialise JS（Carousel）工作。我刚刚在本周早些时候就Materialise CSS格式问了一个问题，我认为JS也是固定的。我哪里出错？

<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>

<div class="container">
  <!-- CAROUSEL -->
  <h1>CAROUSEL</h1>
  <div class="carousel">
      <a class="carousel-item" href="#one!"><img src="sample-1.jpg"></a>
      <a class="carousel-item" href="#two!"><img src="sample-1.jpg"></a>
      <a class="carousel-item" href="#three!"><img src="sample-1.jpg"></a>
      <a class="carousel-item" href="#four!"><img src="sample-1.jpg"></a>
      <a class="carousel-item" href="#five!"><img src="sample-1.jpg"></a>
    </div>
  </div>
</div>

<!-- PUSHING THE END OF THE SCREEN -->
<div style="height:500px"></div>

<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<!-- INTIALIZATION -->
<script>
var elem = document.querySelector('.carousel');
var instance = M.Carousel.init(elem, options);

$(document).ready(function(){
  $('.carousel').carousel();
});
</script>
</body>
</html>

Answer 1

您正尝试初始化旋转木马两次。

首先使用vanilla JS

var elem = document.querySelector('.carousel');
var instance = M.Carousel.init(elem, options);

然后使用jQuery

$(document).ready(function(){
  $('.carousel').carousel();
});

香草JS中的第二行导致错误。

Materialize JS无法正常工作？

1 个答案: