jquery - 用于幻灯片放映的 bootstrap 堆叠容器

Question

我有一个关于在 bootstrap 上堆叠容器的问题。

我希望制作一个类似于 powerpoint 演示文稿的页面，其中显示图像并在单击时隐藏当前容器并移至下一个容器。这种设计需要容器/载玻片按顺序堆叠在一起。我希望在页面加载时准备 10 个容器/幻灯片。

到目前为止，我能想到的最接近使用的是 Bootstrap 的“选项卡”功能。

还有其他更好的解决方案吗？

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

但我的解决方案的问题是显示了选项卡按钮。我只需要让堆叠的容器在单击后一个接一个地显示出来。

Answer 1

尽量使用bootstrap的carousel代替tab

<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