Bootstrap4 轮播
Bootstrap4 轮播
Bootstrap4 是一款流行的前端开发框架，它提供了许多组件和工具，使得开发者可以快速构建漂亮的网站。其中一个常用的组件就是轮播（Carousel），本文将向您介绍如何使用 Bootstrap4 轮播组件。
基本结构
轮播组件的基本结构如下：
<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 class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
这个结构由以下几个部分组成：
carousel类：用于标识这是一个轮播组件。carousel-indicators类：用于表示轮播指示器的容器。carousel-inner类：用于包含轮播项的容器。carousel-item类：用于表示轮播项。carousel-control-prev类：用于表示轮播控制器（向前）。carousel-control-next类：用于表示轮播控制器（向后）。
指示器
轮播指示器用于指示当前轮播到哪一项。它通常放置在轮播组件的底部。
<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>
这个指示器包含了三个项，分别对应着三张轮播图。其中 data-target 属性用于关联指示器和轮播组件，data-slide-to 属性用于指定轮播到哪一项。
轮播项
轮播项是轮播组件的核心部分，它包含了图片和文本。每一项都有一个标签和轮播控制器（向前和向后）。
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
这里有三个轮播项，每一个都有一个 carousel-item 类。其中，第一个轮播项 active 类用于标识默认的项。
控制器
轮播控制器用于控制轮播的方向。它包含了向前和向后两个控制器。
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
这里有两个控制器，一个向前，一个向后。它们分别具有 carousel-control-prev 和 carousel-control-next 类。
自动轮播
轮播组件可以自动播放。只要添加 data-ride="carousel" 属性即可。
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
...
</div>
总结
恭喜！你已经学会了如何使用 Bootstrap4 轮播组件。它是一个非常重要的组件，它能够帮助你创建美丽的幻灯片。记住要使用指示器、轮播项和控制器来构建你的幻灯片，并使用 data-ride="carousel" 属性使其自动播放。