轮播效果(Carousel)

轮播不带幻灯片尺寸标准化处理，因此你可能需要使用其它通用样式可自定义样式来调整其大小使之适当匹配。虽然轮播组件支持上一个/下一个控制和指令，但它们不是必备元素，可根据你的需要添加或自定义（展现不同的效果）。

通过 .carousel 命名样式引入轮播组件，同时为此控件设置唯的ID-尤其是当你在同一页面使用多个轮播效果时这是必须的。

这是一个经典的幻灯片示例，请注意轮播上的图像引用了 .d-block 、 .w-100两个样式，以修正浏览器预设的图像对齐带来的影响。

将 .active 样式添加到其中一个幻灯片（一般第一张），否则轮播效果将无法正常运行（展现）。

data-interval="5000" 图片切换时间，单位毫秒

data-wrap="true/false" 是否循环播放

 data-pause="hover/false" 鼠标移上图标是否停止轮播

data-ride="false/carousel" 是否滑动轮播，carousel 滑动

带控制器的效果

加上了上一个/下一个控制器:

包含姿态指示器

也可以将当前所在幻灯片状态指示器添加到轮播效果控件中：

包含字幕的轮播

在 .carousel-item 中使用 .carousel-caption 添加字幕到您的轮播控件中，如果是输小的浏览器viewport上，会自动隐藏（隐藏文字呈现主图片轮播），引用的是.d-none定义，一旦到了中型md浏览设备或屏幕则调用.d-md-block样式使之呈现。

交替变化（代替滑动效果，变为淡隐淡出的效果）

加上 .carousel-fade 到你的滑动里，使交替变化代替滑动。

单个间隔

加上 data-interval="" 到一个 .carousel-item 更改自动循环到下一项之间的延迟时间.

JavaScript行为

选项

可以透過資料屬性或 JavaScript 調整選項。對於資料屬性，將選項名稱附加到 data-，如 data-interval=""。 可以通过数据属性或JavaScript调整（传递）选项，对于数据属性，选项名称追加到data-，如data-interval=""。

方法

(1) .carousel(options)：通过 object 初始化，启动并执行轮播。

(2) .carousel('cycle')：从左到右循环播放。

(3) .carousel('pause')：通过事件停止幻灯片播放。

(4) .carousel(number)：将轮播循环到特定的帧（基于0，类似数组），在 目标被显示之前回传给调用用者 (即 slid.bs.carousel 事件之前)。

(5) .carousel('prev')：将轮播指向前一帧幻灯片，在前一个目标被显示之前回传给调用者 (即 slid.bs.carousel 事件之前)。

(6) .carousel('next')：将轮播指向后一帧幻灯片，在前一个目标被显示之前回传给调用者 (即 slid.bs.carousel 事件之前)。

事件

所有的轮播事件都在轮播本身 (即 <div class="carousel">)下被触发。

Bootstrap提供了两下事件给轮播控件使用，这两个事件都具有以下附加属性：

50. direction: 轮播滚动的方向 ( "left" 或 "right")。
50. relatedTarget: 作为活动项目滑动到指定的DOM元素。
50. from: 当前项目的项目的索引。
50. to:下一个项目的索引。