使用箭头导航的引导幻灯片

Question

我目前是第一次使用引导程序。
我想知道是否可以创建某种轮播画廊，或者是否有适合我需要的模板。

我想要在顶部显示图像的内容，然后在下面的单独 div 中显示该图像的描述。
幻灯片将一次显示三个，用户可以使用左右箭头浏览图像和说明。
我还希望它能够响应小型设备上的工作。

我认为这项任务会很简单，但我发现很难在网上找到任何资源来提供帮助。

可能与此示例功能类似：http://bxslider.com/examples/carousel-demystified

Answer 1

使用引导程序的轮播 (http://getbootstrap.com/javascript/#carousel) 很容易做到这一点。

您的轮播项目不必是图像，它们可以是包含您想要的任何元素的 div。例如，第一个轮播项目可能如下所示：

<div class="item active">
    <div class="col-sm-4">
        <img src="image1" alt="..." class="img-responsive" />
        <p class="help-block text-center">Caption for image 1</p>
    </div>
    <div class="col-sm-4">
        <img src="image1" alt="..." class="img-responsive" />
        <p class="help-block text-center">Caption for image 2</p>
    </div>

    <div class="col-sm-4">
        <img src="image3" alt="..." class="img-responsive" />
        <p class="help-block text-center">Caption for image 3</p>
    </div>
</div>

那么您的下一个项目可以包含编号为 4、5 和 6 的图像/标题，依此类推..

只要确保您的图像具有“img-responsive”类，它们应该与整个轮播很好地缩小。

Bootstrap 的轮播示例非常简单，因此您可以查看网站以了解如何添加导航箭头，但它看起来像这样：

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>