轮播效果是一个幻灯片效果，使用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端都显示文字，那么直接删除这两个判断样式即可！
