материализация процесса карусели не начинается ( - PullRequest
Новая
       17

материализация процесса карусели не начинается (

0 голосов
/ 20 ноября 2018

У меня странная проблема с каруселью (https://materializecss.com/). Иногда это работает, но иногда я получаю следующую ошибку:

jQuery.Deferred исключение: c не определено s @ https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js:6:158232 TypeError: c не определено [Weitere Informationen]

Я использую jquery 3.2.1 и материализую 0.100.2 в Firefox. Эта проблема также появляется на краю. Она работает в основном с Chrome.

Вот мой HTML-код: 

  <div class="hide-on-small-only blue-grey lighten-5">
    <div id="section-industry" class="container section-padding">
      <div id="crsl-industry" class="carousel">
        <a class="carousel-item" href="#cimg1" data-industry="Pulp & Paper"><img src="img/industry/pulp_and_paper.jpg" /></a>
        <a class="carousel-item" href="#cimg2" data-industry="Corrugated Packaging"><img src="img/industry/corrugated_packageing.jpg" /></a>
        <a class="carousel-item" href="#cimg3" data-industry="Paper Converting"><img src="img/industry/paper_converting.jpg" /></a>
        <a class="carousel-item" href="#cimg4" data-industry="Starch & Flour"><img src="img/industry/starch_and_flour.jpg" /></a>
        <a class="carousel-item" href="#cimg5" data-industry="Food & Beverage"><img src="img/industry/food_and_beverage.jpg" /></a>
        <a class="carousel-item" href="#cimg6" data-industry="Adhesives"><img src="img/industry/adhesives.jpg" /></a>
        <a class="carousel-item" href="#cimg7" data-industry="Environmental Engineering"><img src="img/industry/environmental_engineering.jpg" /></a>
        <a class="carousel-item" href="#cimg8" data-industry="Engineering Construction"><img src="img/industry/engineering_construction.jpg" /></a>
      </div>
      <h4 id="label-industry" class="center-align bvg-blue-text" style="padding-top: 40px"></h4>
    </div>
  </div>

Вот мой код js: 

  $('#crsl-industry').carousel({indicators: true, onCycleTo: function(element) {
    $('#label-industry').text($(element).data('industry'));
  }});

  $('.carousel-item').click(function() {
    $('#crsl-industry').carousel('next');
  });
  setInterval(function() {
    $('#crsl-industry').carousel('next');
  }, 2000);

Я не уверен, что не так?Это проблема браузера?Пожалуйста, совет.

Спасибо, Саймон

1 Ответ

0 голосов
/ 07 декабря 2018

Хорошо, я все исправил.webcompat.com предположил, что это может быть состояние гонки.Это оказалось правдой.Вы не можете использовать код в $(document).ready().Вместо этого поставьте код $(window).on('load', function() {/*code*/});

Код, работающий на меня, выглядит так: 

$(window).on('load', function() {

  $('#crsl-industry').carousel({indicators: true, onCycleTo: function(element) {
    $('#label-industry').text($(element).data('industry'));
  }});
  
  $('.carousel-item').click(function() {
    $('#crsl-industry').carousel('next');
  });

  setInterval(function() {
    $('#crsl-industry').carousel('next');
  }, 2000);
});
...