[英]Bootstrap Carousel not Working (showing all images at once)
我正在嘗試在我的Bootstrap 3網站上添加一個輪播。 使用的代碼直接來自http://getbootstrap.com/javascript/#carousel 。 代碼也沒有記錄,所以我不得不做出一些猜測。 旋轉木馬只顯示堆疊在一起的所有三個圖像。 我相當肯定我的javascript和jQuery正在工作,因為我有一個設置有工作下拉列表的導航欄。
<div id="carousel-example-generic" class="carousel slide">
<!-- 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">
<div class="item active">
<img src="http://placehold.it/1200x480" alt=“Slide 1”>
<div class="carousel-caption">
<h1>Slide 1</h1>
<p>Slide 1 Description</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x480" alt=”Slide 2”>
<div class="carousel-caption">
<h1>Slide 2</h1>
<p>Slide to Description</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x480" alt=“Slide “3>
<div class="carousel-caption">
<h1>Slide 3</h1>
<p>Slide 3 Description</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
編輯:我做了更多的工作(謝謝回答家伙),我想我明白了。 幻燈片實際上是動畫的,與我的一些嘗試不同,它會循環回到開始。 希望就是這樣。
<div id="carousel-example-generic" class="carousel slide">
<!-- 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">
<!-- Slide 1-->
<div class="item active">
<img src="http://placehold.it/1200x480" alt="Slide 1" />
<div class="carousel-caption">
<h1>Slide 1</h1>
<p>Slide 1 Description</p>
</div>
</div>
<!-- Slide 2-->
<div class="item">
<img src="http://placehold.it/1200x480" alt="Slide 2" />
<div class="carousel-caption">
<h1>Slide 2</h1>
<p>Slide 2 Description</p>
</div>
</div>
<!-- Slide 3-->
<div class="item">
<img src="http://placehold.it/1200x480" alt="Slide 3" />
<div class="carousel-caption">
<h1>Slide 3</h1>
<p>Slide 3 Description</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
如前所述,您的所有旋轉木馬物品都已標記為活動狀態,這些物品包裹在不同的旋轉木馬內部類別中。 您只需要在carousel-inner類中包裝項目,而不包含包含carousel-control類的鏈接。 為了旋轉木馬自動滑動,您需要包括:
$(function(){
$('#carousel-example-generic').carousel();
});
檢查此鏈接: 更新了代碼
您的所有幻燈片都標記為有效...任何時候只有一個幻燈片應該有活動課程。
你也有太多的旋轉木馬內部div。 所有幻燈片都需要包裹在一個旋轉木馬內部。
<div class="item active">
從所有div中刪除活動類,不包括第一個
我今天遇到了同樣的問題。 我從http://getbootstrap.com下載了bootstrap.min.css並使用了那個css。 那個css顯示了這個問題。 我將css源更改為https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ,它解決了問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.