以下内容参考菜鸟教程

一个简单的轮播图由三个方面组成：

• 轮播指标（即轮播图下方的圆点）
• 轮播项目（即要实现轮播效果的图片）
• 轮播导航（即轮播图左右两边的箭头）

<div id="myCarousel" class="carousel slide"  data-ride="carousel">
    <!-- 轮播（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>   
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
            <!--<div class="carousel-caption">这里是标题</div>-->
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel" 
       data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
    <a class="carousel-control right" href="#myCarousel" 
       data-slide="next">&rsaquo;</a>
</div>

轮播指标

<div id="myCarousel" class="carousel slide" data-ride="carousel">

• .slide 使图片有个滑动的特效;
• data-ride="carousel" 让图片在页面加载时就开始动画播放，而不是通过单击去触发动画播放效果。

• class="carousel-indicators" 包裹所有轮播指标的盒子(下图是不添加.carousel-indicators的效果)；

  
  1.png

• data-target="#myCarousel" 将所有轮播指标指向激活轮播的元素，即上述的id="myCarousel" ；
• data-slide-to="0" 将每个轮播指标与图片的索引位置一一对应：第一个轮播指标指向第一张图片（即索引为0的那张），以此类推。

轮播项目

• class="carousel-inner" 是包裹所有轮播项(即轮播图片)的盒子;
• class="item" 每一个.item就是单个轮播项目；
• class="carousel-caption" 向轮播项目添加标题。只需要在该处放置任何可选的 HTML 即可，它会自动对齐并格式化。

轮播导航

• 用<a>标签的超链接实现点击切换，同样链接href指向启用轮播的元素的id;
• class="carousel-control" 用于添加左右两个轮播导航箭头即点击切换图片的功能（不设置就不会显示箭头，点击也不会有任何效果）；
• class="left" 用于添加左右两边轮播导航的CSS样式，不添加也不会影响点击切换图片的功能；
• data-slide="prev" 用来改变幻灯片相对于当前位置的位置,即切换图片。