Bootstrap 轮播
在本教程中，您将学习如何使用 Bootstrap 创建轮播。
使用 Bootstrap 创建轮播
轮播也称为幻灯片或图像滑块，是在网页的小空间内展示大量内容的最佳方式之一。 它是一种动态的内容呈现方式，通过循环浏览多个项目，用户可以看到或访问文本和图像。
以下示例将向您展示如何使用 Bootstrap 轮播插件构建一个简单的轮播，如图像旋转器或幻灯片。
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 轮播指标 -->
<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>
<!-- 轮播项目的包装器 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slide1.png" alt="First Slide">
</div>
<div class="carousel-item">
<img src="images/slide2.png" alt="Second Slide">
</div>
<div class="carousel-item">
<img src="images/slide3.png" alt="Third Slide">
</div>
</div>
<!-- 轮播控件 -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>— 上面示例的输出将如下所示：
查看片段部分，了解一些设计精美的 Bootstrap 轮播的示例。
您还可以在轮播的各个幻灯片中添加标题或描述文本等标题，请查看下一个示例。
通过数据属性激活轮播
使用 Bootstrap，您可以通过数据属性非常轻松地创建轮播，而无需编写任何 JavaScript 代码。 我们来看下面的例子：
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- 轮播指标 -->
<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>
<!-- 轮播项目的包装器 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slide1.png" alt="First Slide">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/slide2.png" alt="Second Slide">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/slide3.png" alt="Third Slide">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- 轮播控件 -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>您可能想知道这段代码是关于什么的。 好的，下面我们将这个轮播代码的每一部分一一浏览，以便更好地理解。
代码说明
Bootstrap 轮播基本上由三个组件组成—— 轮播指示器（小圆圈）、轮播控件（上一个和下一个箭头）和轮播项目或幻灯片。
- 每个轮播的最外层容器需要一个唯一的
id（在我们的例子中是id="myCarousel"），以便轮播指示器可以定位它（line no-4,5,6） 和轮播控件（line no-33,36）正常运行。 .carousel元素的data-ride="carousel"属性告诉Bootstrap程序在页面加载时立即开始动画轮播。 而data-interval属性指定两张幻灯片之间的时间延迟。.data-slide-to属性（line no-4,5,6）在单击 特定的轮播指示器。- 幻灯片在
.carousel-inner（line no-9）中指定，每张幻灯片的内容在.carousel-item元素中定义，该元素可以是文本和图像。 - 轮播控件上的
data-slide属性（line no-33,36）接受关键字prev或next，这会改变幻灯片相对于它的位置 当前位置。
其余的东西是不言自明的，例如 .carousel 元素指定 Bootstrap 轮播，.carousel-indicators 元素指示轮播中有多少张幻灯片以及当前处于活动状态的幻灯片，.carousel-caption 元素 在 .carousel-item 元素中使用定义了该幻灯片的标题等。
提示：需要将类 .active 添加到其中一张幻灯片（即在 .carousel-item 元素上）。 否则，轮播将不可见。
注意： .carousel 元素上的 .slide 类将 CSS 幻灯片过渡动画添加到轮播中，使轮播项目在显示新项目时滑动。
通过 JavaScript 激活轮播
您也可以使用 JavaScript 手动激活轮播 — 只需在 JavaScript 代码中使用包装器元素的 id 或 class 选择器调用 carousel() 方法即可。
<script>
$(document).ready(function(){
$("#myCarousel").carousel();
});
</script>选项
可以将某些选项传递给 carousel() Bootstrap方法来自定义轮播的功能。 选项可以通过数据属性或 JavaScript 传递。
通过数据属性设置模态选项，只需将选项名称附加到data-，如 data-interval="3000", data-pause="hover" 等。
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| interval | number | 5000 | 指定在自动循环中一张幻灯片到另一张幻灯片之间延迟的时间量（以毫秒为单位）。 如果false，轮播不会自动循环。 |
| pause | string null |
"hover" | 默认情况下，当鼠标指针进入轮播时暂停轮播，当鼠标指针离开轮播时恢复轮播。 如果设置为 null，则将鼠标悬停在轮播上不会暂停它。 |
| wrap | boolean | true | 指定轮播是连续循环还是硬停止（即在最后一张幻灯片处停止）。 |
| keyboard | boolean | true | 指定轮播是否应对键盘事件做出反应。 默认情况下它是 true，这意味着如果轮播有焦点，您可以使用键盘上的左右箭头键转到其上一张和下一张幻灯片。 |
| ride | string | false | 在用户手动循环第一个项目后自动播放轮播。 如果是"carousel"，则在加载时自动播放轮播。 |
| touch | boolean | true | 指定轮播是否应支持触摸屏设备上的左/右滑动交互。 |
数据属性提供了一种设置轮播选项的简单方法，但是 JavaScript 是更可取的方法，因为它可以防止您重复工作。 请参阅以下部分中的 .carousel(options) 方法，了解如何使用 JavaScript 设置轮播选项。
在Bootstrap轮播中禁用自动滑动
默认情况下，Bootstrap 轮播会在页面加载时自动开始播放或滑动。 但是，您可以通过 .carousel 元素上的 data-interval="false" 等数据属性设置轮播 interval 选项或通过 JavaScript 使用 .carousel(options) 来关闭此自动滑动，如下例所示：
<script>
$(document).ready(function(){
$("#myCarousel").carousel({
interval : false
});
});
</script>方法
这些是标准Bootstrap程序的轮播方法：
.carousel(options)
此方法使用可选选项初始化轮播并开始循环浏览项目。
<script>
$(document).ready(function(){
$("#myCarousel").carousel({
interval : 3000
});
});
</script>.carousel('cycle')
这个方法启动轮播，从左到右循环遍历项目。
<script>
$(document).ready(function(){
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
});
</script>.carousel('pause')
此方法阻止轮播在项目之间循环。
<script>
$(document).ready(function(){
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
});
</script>.carousel(number)
此方法将轮播循环到特定帧（从 0 开始，类似于数组）。
<script>
$(document).ready(function(){
$(".slide-three").click(function(){
$("#myCarousel").carousel(3);
});
});
</script>.carousel('prev')
此方法将轮播循环到上一个项目。
<script>
$(document).ready(function(){
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
});
</script>.carousel('next')
此方法将轮播循环到下一个项目。
<script>
$(document).ready(function(){
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
});
</script>事件
Bootstrap 的 carousel 类包含一些用于挂钩 carousel 功能的事件。
| 事件 | 说明 |
|---|---|
| slide.bs.carousel | 调用幻灯片实例方法时立即触发此事件。 |
| slid.bs.carousel | 当轮播完成其幻灯片转换时触发此事件。 |
以下示例在轮播项目的滑动过渡已完全完成时向用户显示警告消息。
<script>
$(document).ready(function(){
$('#myCarousel').on('slid.bs.carousel', function(){
alert("The sliding transition of previous carousel item has been fully completed.");
});
});
</script>