如何自定义bootstrap轮播指示器

Question

我有这个Bootstrap轮播图像，但目前指标显示为0-3。但我想从1-4改变它，并且编号不在框中。

这是来自html部分。

<div id="screenShot" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
   <div class="carousel-inner" role="listbox">
   <div class="item" ng-class="{'active':$first}" ng-repeat="s in app.appScreenShot">
    <img src={{s}} />
   </div>
   </div>
   <div>
    <!-- Indicators -->
     <ol class="carousel-indicators">
      <li data-target="#screenShot" data-slide-to="{{$index}}" ng-class="{'active':$first}" ng-repeat="s in app.appScreenShot">{{$index}}</li>
     </ol>
   </div>
</div>

这是来自CSS部分。

<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    width: 100%;
    height: 500px;
    margin: auto;
}
.carousel-indicators li {
    display: inline-block;
    width: 38px;
    height: 38px;
    margin: 10px;
    text-indent: 0;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background-color: #F7F7F7;
}
.carousel-indicators .active {
    width: 44px;
    height: 44px;
    margin: 10px;
    background-color: #ffff99;
}
</style>