Javascript 引导3旋转木马标题延迟

网站：

问题：试图在代码中实现javascript slide.bs.carousel，以便标题延迟，并在图片加载到幻灯片中几秒钟后出现。我将“slide.bs.carousel”的代码放在脚本标记中，在结束正文标记之前，而不是放在单独的js文件中。但它似乎一点也不起作用，仍然伴随着图片出现

我所做的：

似乎它在JSFIDLE中不起作用，这是这个程序的新功能，这就是为什么我提供了该网站的链接，这样你们至少可以了解我要实现的目标

我想问的是，“slide.bs.carousel”的脚本应该放在哪里？我觉得一切都很好，我猜我把脚本放错地方了

<div id="carousel-example-generic" class="carousel slide carousel-fade" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="./img/family-new.jpg" alt="We are Serious about Clean!">
      <div class="carousel-caption">
       <h3>Safe for the whole family!</h3>
      </div>
    </div>
    <div class="item">
      <img src="./img/RugCleaningFacility.jpg" alt="Rug Cleaning">
      <div class="carousel-caption">
       <h3>State of the art rug cleaning facility!</h3>
      </div>
    </div>
    <div class="item">
      <img src="./img/ProfessionalWW.jpg" alt="Window Washing and Pressure Washing">
      <div class="carousel-caption">
      <h3>Professional Window Washing and Pressure Washing!</h3>
      </div>
    </div>
    <div class="item">
      <img src="./img/UpholsteryClean.jpg" alt="Upholstery Cleaning">
      <div class="carousel-caption">
       <h3>The deepest upholstery cleaning available!</h3>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

---

这是什么意思？可能是我把东西卖错了，或者是位置全错了

您的小提琴不包括Bootstrap.js。还必须包括jQuery，因为Bootstrap.js需要jQuery

未捕获的TypeError:jQuery.easing[this.easing]不是一个函数问题，可以通过添加jQuery UI来解决

您会注意到，我还将您的JS放在了.ready中，这样就可以保证在DOM就绪后执行它

---

我已经更新了小提琴让你复习

你的提琴不包括bootstrap.js或jquery。控制台错误：uncaughttypeerror:jquery.easing[this.easing]不是function@ChrisYongchu我将bootstrap.js包含在小提琴中。仍然没有看到任何事情发生。。。奇怪的

carouselContainer.carousel({
    interval: slideInterval,
    cycle: true,
    pause: "hover"
}).on('slid.bs.carousel', function() {
    toggleCaption();
});