stackoom
  简体   繁体   中英

What am I missing in my html to make the javascript work?

 原文  2017-11-30 21:11:12  5   3    javascript/ jquery/ html

Question

What am I missing here to get my JS slider to work? I have referenced the js files 'js' folder that is within my website folder. I'm using one of the js scripts from http://materializecss.com/ 

 <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <script> $(document).ready(function() { $('.carousel').carousel(); }); </script> <div class="carousel carousel-slider center" data-indicators="true"> <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 class="carousel-item green white-text" href="#three!"> <h2>Third Panel</h2> <p class="white-text">This is your third panel</p> </div> <div class="carousel-item blue white-text" href="#four!"> <h2>Fourth Panel</h2> <p class="white-text">This is your fourth panel</p> </div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/materialize.min.js"></script> </body> </html>

3 answers

solution1
 2  2017-11-30 21:14:21

You should include your jQuery library before using it, so : 

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

Should appear before : 

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

In your code. 

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

   BODY CONTENT ....

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

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

</html>

solution2
 1  2017-11-30 21:14:38

You can't call $(document).ready() until after you've loaded the jQuery library. So put your script at the end, not the beginning. 

 <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div class="carousel carousel-slider center" data-indicators="true"> <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 class="carousel-item green white-text" href="#three!"> <h2>Third Panel</h2> <p class="white-text">This is your third panel</p> </div> <div class="carousel-item blue white-text" href="#four!"> <h2>Fourth Panel</h2> <p class="white-text">This is your fourth panel</p> </div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/materialize.min.js"></script> <script> $(document).ready(function() { $('.carousel').carousel(); }); </script> </body> </html>

solution3
 0 ACCPTED  2017-11-30 22:10:27

Beside the re organization of the scripts dont forget to call the last script function, that who runs the carousel, with the right name of the class that have the list of images or text(because you are calling in your example a div class "carousel" and there is not a div class with that name In my case i put "carousel-slider" to both, the div class and the call of the script this will be an example using only text 

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>
<body>

   <div class="carousel-slider" data-indicators="true">
    <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 class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>

    <div class="carousel-item blue white-text" href="#four!">
      <h2>Fourth Panel</h2>
      <p class="white-text">This is your fourth panel</p>
    </div>
  </div>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>


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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question What am I missing to make ScrollSpy work? What is missing from my discount code to make this work? Am I missing a variable? What am I missing in my JavaScript code? Shipping calculator, What am I missing in this code to make it work? What am I missing in my third JavaScript function? What am I missing in my code? Javascript and XML What am I missing in my Eloquent Javascript, Chessboard code? What changes to my HTML and JavaScript code do I need to make, in order for my character_count to work? scrollTo Jquery WILL NOT WORK, what am I missing? What am I missing on this javascript loan calculator?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM