用於幻燈片顯示的引導堆棧容器

Question

我有一個在引導程序上堆疊容器的問題。

我希望製作一個類似於PowerPoint演示文稿的頁面，在該頁面中顯示圖片，點擊後隱藏當前容器並移至下一個容器。這種設計將需要容器/滑梯依次堆疊在彼此的頂部。我希望在頁面加載時準備10個容器/幻燈片。

到目前爲止，我能想到的最接近的是bootstrap的「tab」功能。

有沒有其他更好的解決方案呢？

<div class="tab-content"> 
     <div class="tab-pane active"> 
      ...... 
     </div> 
</div> 

但我的解決方案的問題是，標籤按鈕顯示。我只需要讓堆疊的容器在點擊它們後依次顯示。

Answer 1

嘗試使用引導的旋轉木馬，而不是標籤

<div id="myCarousel" class="carousel slide"> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item">…</div> 
    <div class="item">…</div> 
    <div class="item">…</div> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

http://twitter.github.io/bootstrap/javascript.html#carousel