Materialize Slider Not Working shows grey screen even if it's initialized

Question

As the title says, I access the materialize css and js locally, downloaded from there site and it occurs like this if i cleared my cache and cookies then im getting this error from the materialize.min.js as shown in the picture here (click)

here is my html and js code.

$(document).ready(function(){
  $('.slider').slider({full_width: true});

  $('#btnLogin').click(function(){
    postOrderID();
  });
  $('#loginPanel').click(function(){
   $('#modalLogin').openModal();
  })
        

function postOrderID() {
 var _pass = document.getElementById("txtPayment").value;
 var dataString = 'tablepass=' + _pass; //+ '&name=' + _name + '&pax=' + _pax + '&pass=' + _pass;
 if (_pass == '') {
  alert("Textbox null");
 } else {
  $.ajax({
  type: "POST",
  url: "php/getinsertOR.php",
  data: dataString,
  }).done(function(data){
   console.log(data);
       if (data == 'Success') {
             window.location.replace("index.html");
       }else if (data == 'Failed'){
        alert("Wrong Password")
       }else if (data == 'Damage'){
    alert("Table Damaged")
       }else{
           window.location.replace("index.html");
       }
   }).fail(function(){
    
  })
 }
  return false;
}

});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css"  media="screen,projection"/>
  </head>
<body>
  <div class="slider fullscreen">
    <ul class="slides">
      <li>
        <img src="images/a3.jpg"><!-- random image -->
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
          <a id="loginPanel" class="waves-effect waves-light btn modal-trigger">Login</a>
        </div>
      </li>
      <li>
        <img src="images/a2.jpg"> <!-- random image -->
        <div class="caption left-align">
          <h3>Left Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="images/a1.jpg"><!-- random image -->
        <div class="caption right-align">
          <h3 class="light black-text text-lighten-1">Right Aligned Caption</h3>
          <h5 class="light black-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
    </ul>

  </div>

    <!-- Modal Structure -->
  <div id="modalLogin" class="modal container">
    <div class="modal-content" style="text-align: center; padding-left: 20% ; padding-right: 20%">
      <label>Note: Confirmation Key is located at the table</label>
      <input id="txtPayment" type="text" id="tablepass" name="tablepass" placeholder="Enter Confirmation Key" style="text-align: center"> <br>
      <a id="btnLogin" class="waves-effect waves-light btn modal-trigger">Submit</a>
    </div>
  </div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js"></script>              
<script src="js/loginController.js"></script>      
</body>

</html>

Hmm solved by `$(document).ready(function () { $('.slider').slider({full_width: true, height:1000}); });` simply 'start' seems not enough. — SCaffrey, Mar 17 '18 at 19:10

score 0 · Answer 1 · answered Jul 24 '16 at 10:23

Bro it works completely fine in my PC. Just check if you have disabled javascript in mozilla firefox or use another browser to run the page. It will definitely work.

To enable JavaScript for Mozilla Firefox: Click the Tools drop-down menu and select Options. Check the boxes next to Block pop-up windows, Load images automatically, and Enable JavaScript. Refresh your browser by right-clicking anywhere on the page and selecting Reload, or by using the Reload button in the toolbar.

Materialize Slider Not Working shows grey screen even if it's initialized

1 Answers1