【Bootstrap V4系列】学习入门教程之 组件-轮播（Carousel）

轮播（Carousel）

一个幻灯片组件，用于循环浏览元素——图像或文本幻灯片——就像旋转木马一样。

一、How it works

轮播是一个幻灯片，用于循环播放一系列内容，使用CSS 3D转换和一点JavaScript构建。它适用于一系列图像、文本或自定义标记。它还包括对上一个/下一个控件和指示器的支持。

在支持页面可见性API的浏览器中，当用户看不到网页时（例如浏览器选项卡处于非活动状态、浏览器窗口最小化等），转盘将避免滑动。

请注意，不支持嵌套旋转木马，旋转木马通常不符合可访问性标准。

最后，如果你从源代码构建的JavaScript，它需要util.js。

二、Example

旋转木马不会自动规范幻灯片尺寸。因此，您可能需要使用其他实用程序或自定义样式来适当调整内容的大小。虽然旋转木马支持上一个/下一个控件和指示器，但它们并不是明确要求的。根据需要添加和自定义。

需要将.active类添加到其中一张幻灯片中，否则旋转木马将不可见。另外，请确保在.carousel上为可选控件设置一个唯一的id，特别是如果您在单个页面上使用多个carousel。控件和指示器元素必须具有与.carousel元素的id匹配的data-target数据目标属性（或href表示链接）。

2.1 Slides only 仅幻灯片

这是一个只有幻灯片的旋转木马。请注意轮播图像上存在.d-block和.w-100，以防止浏览器默认图像对齐。

<!--仅幻灯片 Slides only-->
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="../images/1.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="../images/2.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="../images/a1.jpg" class="d-block w-100" alt="...">
        </div>
    </div>
</div>

页面展示效果：

2.2 With controls 带控制装置

添加上一个和下一个控件。我们建议使用<button>元素，但您也可以使用带有role=“button”的<a>元素。

<!--带控制装置 With controls-->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="../images/1.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="../images/2.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="../images/a1.jpg" class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </button>
</div>

页面展示效果：

2.3 With indicators 带指示器

您还可以在控件旁边将指示器添加到转盘中。

<!--带指示器 With indicators-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="../images/1.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="../images/2.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="../images/a1.jpg" class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </button>
</div>

页面展示效果：

2.4 With captions 带字幕

使用任何.carousel-item项目中的.carousel-caption标题元素，可以轻松地为幻灯片添加标题。它们可以很容易地隐藏在较小的视口上，如下图所示，使用可选的显示实用程序。我们最初用.d-none隐藏它们，然后用.d-md-block将它们带回中型设备上。

<!--带字幕 With captions-->
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="../images/1.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="../images/2.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Some representative placeholder content for the second slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="../images/a1.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Some representative placeholder content for the third slide.</p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </button>
</div>

页面展示效果：