Bootstrap 3轮播字幕延迟

Question

网站： http ： //freedomcreativesolutions.com/old/steamsource/

问题：尝试将javascript slide.bs.carousel实现到代码中，以使字幕延迟并在图片加载到幻灯片后几秒钟后出现。 我将'slide.bs.carousel'的代码放在脚本标签中，位于结束body标签之前，而不是在单独的js文件中。 但是似乎它根本不起作用，并且仍然随图片一起出现。

我做了什么： http : //jsfiddle.net/fuhs3smx/

似乎它在Jsfiddle中不起作用（该程序的新增功能），这就是为什么我提供了指向该网站的链接的原因，以便您至少了解我要完成的工作。

猜猜我要问的是，“ 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.min.js之后，在拉起开发工具时会收到以下消息：

未捕获的TypeError：undefined不是函数

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

这意味着什么？ 也许我拼错了一些，或者放置位置都错了。

Answer 1

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

Uncaught TypeError: jQuery.easing[this.easing] is not a function问题，可以通过添加jQuery UI来解决。

您会注意到，我还将您的JS放在.ready()以确保可以在DOM准备好后执行它。

我已经更新了小提琴供您查看。 http://jsfiddle.net/yongchuc/fuhs3smx/2/