Twitter Bootstrap Carousel Slide不起作用

Question

我正在嘗試實現Twitter Bootstrap Carousel插件。它看起來和自動循環正確，但項目之間的幻燈片效果不起作用。 它簡單地用下一個項目靜態替換一個項目。 雖然它功能齊全，但這是一個不太令人滿意的用戶體驗。 思考？

<div class="span7">
        <div id="myCarousel" class="carousel slide">
          <div class="carousel-inner">
            <div class="item active">
              <img src="img/CoachellaValley.png" alt="">
              <div class="carousel-caption">
                <h4>Sponsor 1</h4>
              </div>
            </div>
            <div class="item">
              <img src="img/CoachellaValley2.png" alt="">
              <div class="carousel-caption">
                <h4>Sponsor 2</h4>
              </div>
            </div>
            <div class="item">
              <img src="img/CoachellaValley3.png" alt="">
              <div class="carousel-caption">
                <h4>Sponsor 3</h4>
              </div>
            </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
      </div>
[...]
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script type="text/javascript">
  $(function(){
    $('#myCarousel').carousel();
  })
  </script>

Answer 1

嘗試這個：

刪除您在文檔中加載的所有以下js腳本：

<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>

並按照相同的順序保持以下內容（jQuery首先）

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>

我相信的問題是，除了多次加載相同的腳本文件之外（bootstrap js文件已經包含了所有插件，所以不需要包含最小版本（現在保存它用於生產）或單個單獨的腳本文件） ，您沒有加載bootstrap.js文件中包含的轉換腳本，因為腳本的加載順序。

Answer 2

經過一段時間的努力，我找到了解決方案 - 你只需要包含

引導-transition.js

幻燈片動畫將起作用。

Answer 3

交易是我使用class="carousel"用於輪播容器和

$('.carousel').carousel('slide',{interval:1000});

它僅適用於左/右鍵單擊並且工作得很好（但只有一次）。

如果使用class="carousel slide"和

$('.carousel .slide').carousel('slide',{interval:1000});

然后旋轉木馬切換但沒有幻燈片動畫效果。

Answer 4

你的代碼是正確的..在我的系統中這個代碼工作正常..

Bootstrap 3中沒有“幻燈片”類的定義。但是沒有“幻燈片”類，輪播圖像會隨着任何動畫效果而改變。

在您的代碼中添加此腳本

<script>
    $(document).ready(function () {
        $('.carousel').carousel();
    });
</script>

檢查代碼中的Bootstrap CSS＆JS Reference，並檢查Reference文件的順序

您可以按照以下順序： -

1. bootstrap.css
2. 自舉theme.css
3. jQuery的1.9.1.js
4. bootstrap.js

腳本塊不能用於JQ庫..因此正確添加JQ庫文件..

並確保在腳本工作之前加載JQ文件。為此，您可以在頁面頂部添加引用

Answer 5

盡管這個問題得到了成功解答 - 我來到這里尋找類似問題的答案。

我在旋轉木馬上的第一個項目是向左滑動，就像正常一樣，但第二個項目不在它后面。 一旦第一個項目離開屏幕，第二個項目就會出現，而不是滑入。然后它會消失，第一個項目將正確滑入。

如果您遇到此問題，請檢查您是否有職位：親屬; 在.item div。

我這樣補充說：

.carousel-inner > .item {
    position:relative;
    height:495px;
}

事實證明，這會讓事情變得混亂。 刪除位置：相對; 解決了這個問題。 現在滑動是順暢和正確的。