2016-09-25 2 views
1

** materializecss 회전 목마가 전혀 표시되지 않습니다. 다른 요소가 잘 작동합니다. 다음은 전체 코드입니다. 방금 ​​시작했습니다.Materializecss 회전 목마가 보이지 않음

나는 무엇을 놓치고 있는지 모른다.

좋습니다. **

<!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

documentation of materializecss carousal는 몇 가지 테스트 후, 나는 당신이 당신의 몸 태그의 끝에서 스크립트를 넣어 브라우저가 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

을 당신은 이 bootstrap.js를 제거한 후 스크립트 태그를

<!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

을 실현 후 carosuel를 초기화해야 내 프로그램에서 완벽하게 작동합니다.

관련 문제