Question

我对轮播（https://materializecss.com/）有一个奇怪的问题。 Somtimes正常工作，但是Somtimes我收到以下错误：

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并在firefox上实现0.100.2。此问题也出现在边缘。它主要适用于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);

我不确定怎么了？那是浏览器问题吗？请指教。

谢谢西蒙

Answer 1

好的，我已经解决了。 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);
});

Materializcess轮播无法初始化（

1 个答案: