Материализованный параллакс не работает

Question

Я добавил код параллы на свою страницу, но изображения не появляются, когда я удаляю класс "параллакс" из контейнера изображения, изображения появляются, но без эффекта параллакса,

  <div class="parallax-container">
    <div class="parallax"><img src="content/img/wood.jpg"></div>
  </div>
  <div class="section white">
    <div class="row container">
      <h2 class="header">Parallax</h2>
      <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
    </div>
  </div>
  <div class="parallax-container">
    <div class="parallax"><img src="content/img/wood.jpg"></div>
  </div>


<script type="text/javascript">
var elem = document.querySelector('.parallax');
var instance = M.Parallax.init(elem, options);

// Or with jQuery

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

</script>

и это библиотеки, которые я добавил

  <script src="app\lib\angular.min.js"></script>
  <script src="app\lib\angular-route.min.js"></script>
  <script src="app\lib\angular-aria.min.js"></script>
  <script src="app\lib\angular-messages.min.js"></script>
  <script src="app\lib\angular-animate.min.js"></script>
  <link rel="stylesheet" href="app\lib\angular-material.min.css">
  <script src="app\lib\angular-material.min.js"></script>
  <link rel="stylesheet" href="content/css/styles.css">
  <!--Materialize-->
  <link href="materialize\css\icon.css" rel="stylesheet">
  <link rel="stylesheet" href="materialize/css/materialize.min.css">
  <link rel="stylesheet" href="app\lib\Roboto.css">
  <script src="app\app.js"></script>
<script type="text/javascript" src="materialize\js\jquery.3.2.1.min.js"></script>
   <script src="materialize\js\materialize.min.js"></script>

Answer 1

Ваша ошибка заключается в попытке дважды запустить функцию в вашем коде Javascript. Кроме того (по крайней мере, с моей стороны), я иногда получаю ошибки, используя vanilla JS при инициализации компонентов для материализации. Что вы могли бы сделать: (удалите ванильный JS-код и добавьте его в конец файла, желательно ниже тега конца тела)

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

Убедитесь, что вы вызываете jquery перед сценарием материализации следующим образом:

 <script type="text/javascript" src="materialize\js\jquery.3.2.1.min.js"> 
 </script>
 <script src="materialize\js\materialize.min.js"></script>