2016-09-25 88 views
1

** materializecss carousal根本沒有出現。 其他元素工作正常。以下是整個代碼。 我剛開始。Materializecss旋轉木馬沒有顯示

我不知道我在想什麼。

請建議。 documentation of materializecss carousal **

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/> 
     <title>Starter Template - Materialize</title> 

     <!-- CSS --> 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
     <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/> 
     <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/> 
    </head> 
    <body> 
     <nav class="light-blue lighten-1" role="navigation"> 
     <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a> 
      <ul class="right hide-on-med-and-down"> 
      <li><a href="#">Navbar Link</a></li> 
      </ul> 

      <ul id="nav-mobile" class="side-nav"> 
      <li><a href="#">Navbar Link</a></li> 
      </ul> 
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a> 
     </div> 
     </nav> 
     <div class="container"> 
      <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> 
     </div> 


     <script type="text/javascript"> 

      $(document).ready(function(){ 
     $('.carousel').carousel(); 
      }); 
     </script> 
     <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
     <script src="js/materialize.js"></script> 
     <script src="js/init.js"></script> 

     </body> 
    </html> 

回答

2

一些測試後,我看見你把腳本在你的身體標記的結束和瀏覽器未找到的jquery.js也不materialize.js。

試着在你的身體像這樣的beggining使用它們:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/> 
    <title>Starter Template - Materialize</title> 

    <!-- CSS --> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> 
    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/> 
</head> 
<body> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> 
    <script src="js/init.js"></script> 

    <nav class="light-blue lighten-1" role="navigation"> 
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a> 
     <ul class="right hide-on-med-and-down"> 
     <li><a href="#">Navbar Link</a></li> 
     </ul> 

     <ul id="nav-mobile" class="side-nav"> 
     <li><a href="#">Navbar Link</a></li> 
     </ul> 
     <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a> 
    </div> 
    </nav> 
    <div class="container"> 
     <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> 
    </div> 


    <script type="text/javascript"> 

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

    </body> 
</html> 
0

你有兌現腳本標籤

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/> 
     <title>Starter Template - Materialize</title> 

     <!-- CSS --> 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
     <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/> 
     <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/> 
    </head> 
    <body> 
     <nav class="light-blue lighten-1" role="navigation"> 
     <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a> 
      <ul class="right hide-on-med-and-down"> 
      <li><a href="#">Navbar Link</a></li> 
      </ul> 

      <ul id="nav-mobile" class="side-nav"> 
      <li><a href="#">Navbar Link</a></li> 
      </ul> 
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a> 
     </div> 
     </nav> 
     <div class="container"> 
      <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> 
     </div> 



     <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
     <script src="js/materialize.js"></script> 
     <script src="js/init.js"></script> 
     <script type="text/javascript"> 

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

去除bootstrap.js後後初始化carosuel它在我的程序中完美運行