Question

我第一次使用bootstrap 我想知道是否有可能创建某种旋转木马画廊，或者是否有适合我需要的模板。

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

我认为这项任务非常简单，但我发现很难找到任何在线资源来帮助。

可能与此示例具有相似功能的内容：http://bxslider.com/examples/carousel-demystified

Answer 1

使用bootstrap的轮播（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，依此类推..

确保您的图片具有＆＃34; img-responsive＆＃34;他们应该整个旋转木马很好地缩小尺寸。

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>

使用箭头导航的Bootstrap幻灯片

1 个答案: