Question

我有一个关于在引导程序上堆叠容器的问题。

我希望制作一个类似于powerpoint演示文稿的页面，在该页面中显示图像，点击后，它会隐藏当前容器并继续移动到下一个容器。这种设计要求容器/载玻片按顺序堆叠在彼此之上。我希望在页面加载时准备10个容器/幻灯片。

到目前为止，我能想到的最接近的事情是bootstrap的“tab”功能。

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

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

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

Answer 1

尝试使用bootstrap的轮播而不是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

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

1 个答案: