使用boot写轮播图

  HTML结构：

<!-- 最外层父级 -->

      <div class="carousel slide" id="banner">

        <!-- 展示图的区域 -->

        <div class="carousel-inner" data-ride="carousel">

          <div class="carousel-item active"><img src="./index/banner1.png" alt="" class="d-block w-100"></div>

          <div class="carousel-item"><img src="./index/banner2.png" alt="" class="d-block w-100"></div>

          <div class="carousel-item"><img src="./index/banner3.png" alt="" class="d-block w-100"></div>

          <div class="carousel-item"><img src="./index/banner4.png" alt="" class="d-block w-100"></div>

        </div>

        <!-- 左右切换按钮 -->

        <a href="#banner" class="carousel-control-prev xz-lr" data-slide="prev ">

          <span class="carousel-control-prev-icon"></span>

        </a>

        <a href="#banner" class="carousel-control-next xz-lr" data-slide="next">

          <span class="carousel-control-next-icon"></span>

        </a>

        <!-- 控制符 -->

        <!-- 控制符 -->

        <ul class="carousel-indicators xz-kzf">

          <li data-target="#banner" data-slide-to="0" class="active"></li>

          <li data-target="#banner" data-slide-to="1"></li>

          <li data-target="#banner" data-slide-to="2"></li>

          <li data-target="#banner" data-slide-to="3"></li>

        </ul>

      </div>

CSS样式：

.xz-lr{

      width: 50px;

      height: 100px;

      /* 移到中间去 */

      top:50%;

      transform: translateY(-50%);

    }

    .xz-lr:hover{

      background-color: rgba(0,0,0,0.2);

    }

    .xz-kzf li{

      height: 14px;

      width: 14px;

      border-radius: 50%;

      background-color: #fff;

    }

    .xz-kzf .active{

      background-color: #0aa1ed;

    }