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/