轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图的浏览控制和指令支持。
在支持 Page Visibility API（页面可见性）的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态、窗口*小化时），轮播效果控件会停止运动，从而节省性能。
注意1：请注意轮播上的图像引用了 .d-block 、 .w-100两个样式，以修正浏览器预设的图像对齐带来的影响。
注意2：将 .active 样式添加到其中一个幻灯片（一般*张），否则轮播效果将无法正常运行（展现）。
注意3：加上 data-interval="" 到一个 .carousel-item 更改自动循环到下一项之间的延迟时间.
包含字幕的轮播
在 .carousel-item 中使用 .carousel-caption 添加字幕到您的轮播控件中，如果是输小的浏览器viewport上，会自动隐藏（隐藏文字呈现主图片轮播），引用的是.d-none定义，一旦到了中型md浏览设备或屏幕则调用.d-md-block样式使之呈现。
<div class="bd-example">
<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" data-interval="10000">
<img src="/img/2016instbg_01.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item" data-interval="10000">
<img src="/img/2016instbg_02.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item" data-interval="10000">
<img src="/img/2016instbg_03.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>问题：
bootstrap4 carousel-caption 被自动隐藏了，就是PC端时可以看到大标题下面的描述用于，但是到手机端时，这些描述被自动隐藏了！
解决方案：
正如上文所提到的那样，是因为在bootstrap 4版本中自动引用了两个样式：.d-none 和 .d-md-block样式，当PC端的时候使用.d-md-block，当手机端时使用 .d-none。
所以如果您想手机端和PC端都显示文字，那么直接删除这两个判断样式即可！
