如何将 jQuery Carousel 脚本添加到 Bootstrap 布局答案

【问题标题】：How to add jQuery Carousel script to Bootstrap layout如何将 jQuery Carousel 脚本添加到 Bootstrap 布局
【发布时间】：2015-08-10 17:46:19
【问题描述】：

我无法让这个Bootstrap carousel snippet 工作。我已将以下代码添加到我的 Bootstrap HTML 布局中，但我不确定该脚本是否在正确的位置。

我做错了什么？

<!-- !FOTO AUTO -->
<div id="container-slider-dettaglio-auto">
  <!-- Slider -->
  <div id="slider-foto-auto" class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
    <!-- Top part of the slider -->

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="carousel-bounding-box">
      <div class="carousel slide" id="myCarousel">
        <!-- Carousel items -->
        <div class="carousel-inner">
          <div class="active item" data-slide-number="0">
            <img class="img-responsive" src="img/foto-auto/audi-s4/audi-s4-avant-3.jpeg" alt="Angolare Fronte Audi S4" title="Audi S4">
          </div>

          <div class="item" data-slide-number="1">
            <img src="img/foto-auto/audi-s4/audi-s4-avant-3-2.jpeg" alt="Frontale Audi S4" title="Audi S4">
          </div>

          <div class="item" data-slide-number="2">
            <img src="img/foto-auto/audi-s4/audi-s4-avant-3-3.jpeg" alt="Angolare Fronte Audi S4" title="Audi S4">
          </div>

          <div class="item" data-slide-number="3">
            <img src="img/foto-auto/audi-s4/audi-s4-avant-3-4.jpeg" alt="Angolare Retro Audi S4" title="Audi S4">
          </div>

          <div class="item" data-slide-number="4">
            <img src="img/foto-auto/audi-s4/audi-s4-avant-3-5.jpeg" alt="Retro Audi S4" title="Audi S4">
          </div>

          <div class="item" data-slide-number="5">
            <img src="img/foto-auto/audi-s4/audi-s4-avant-3-6.jpeg" alt="Cerchione Audi S4" title="Audi S4">
          </div>
        </div>
        <!-- Carousel nav -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"></a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
      </div>
    </div>


    <div class="hidden-xs col-lg-12" id="slider-thumbs">
      <!-- Bottom switcher of slider -->
      <ul class="hide-bullets">
        <li class="col-sm-4 col-md-4 col-lg-4">
          <a class="thumbnail" id="carousel-selector-0">
            <img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-thumb.jpg" alt="Thumb Frontale Audi S4">
          </a>
        </li>

        <li class="col-sm-4 col-md-4 col-lg-4">
          <a class="thumbnail" id="carousel-selector-0">
            <img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-2-thumb.jpg" alt="Thumb Frontale Audi S4">
          </a>
        </li>

        <li class="col-sm-4 col-md-4 col-lg-4">
          <a class="thumbnail" id="carousel-selector-1">
            <img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-3-thumb.jpg" alt="Thumb Frontale Audi S4">
          </a>
        </li>

        <li class="col-sm-4 col-md-4 col-lg-4">
          <a class="thumbnail" id="carousel-selector-2">
            <img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-4-thumb.jpg" alt="Thumb Frontale Audi S4">
          </a>
        </li>

        <li class="col-sm-4 col-md-4 col-lg-4">
          <a class="thumbnail" id="carousel-selector-3">
            <img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-5-thumb.jpg" alt="Thumb Frontale Audi S4">
          </a>
        </li>

        <li class="col-sm-4 col-md-4 col-lg-4">
          <a class="thumbnail" id="carousel-selector-4">
            <img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-6-thumb.jpg" alt="Thumb Frontale Audi S4">
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!--/slider-dettaglio-auto-->
</div>
<!--/container-slider-dettaglio-auto-->
<!-- /FOTO AUTO -->

</div>
<!-- /content -->
</div>
<!-- END CONTENT ROW -->

我在<body>结束前添加了这个脚本：

jQuery(document).ready(function($) {

  $('#myCarousel').carousel({
    interval: 5000
  });

  $('#carousel-text').html($('#slide-content-0').html());

  //Handles the carousel thumbnails
  $('[id^=carousel-selector-]').click(function() {
    var id = this.id.substr(this.id.lastIndexOf("-") + 1);
    var id = parseInt(id);
    $('#myCarousel').carousel(id);
  });


  // When the carousel slides, auto update the text
  $('#myCarousel').on('slid.bs.carousel', function(e) {
    var id = $('.item.active').data('slide-number');
    $('#carousel-text').html($('#slide-content-' + id).html());
  });

});

【问题讨论】：

您在页面中添加了哪些库和框架？有没有添加 jQuery 库和 Bootstrap 框架？
我在页面末尾有这个脚本：<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/main.js"></script>@Siguza
图片没问题，但是当我点击拇指时我不能改变大图，就像在例子中一样。
@siguza 我在本地工作

标签： javascript jquery twitter-bootstrap carousel

【解决方案1】：

可行的解决方案：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

进入<head>并且不在<body>的底部。这是正确的吗？

【讨论】：