如何为bootstrap添加进度条以及每个轮播项目的不同间隔

Question

如何添加进度条到bootstrap轮播并给每个项目不同的间隔并保留悬停轮播暂停特性？

我已经尝试了很多时间将它们组合在一起，但它不能顺利运行，jquery动画总是比setInterval运行得更快，并且我不知道如何在转盘上悬停动画在进度条上停止

任何人都知道怎么做？

这是我的工作：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

...           

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        @php
          $intervals = [
            '1000', '2000', '3000', '4000'
          ];
        @endphp
        @foreach ($intervals as $interval_key => $interval)

          <div class="item @if ($interval_key == 0) active @endif" data-interval="{{$interval}}" data-last-item="@if ((count($intervals) - 1) == $interval_key) true @else false @endif">
            <img src="http://placehold.it/400x200" alt="..." />
            <div class="carousel-caption">
              {{$interval_key}}
            </div>
          </div>
        @endforeach
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <div class="progress_bar">
      <div class="percentage">

      </div>
    </div>

这是我的javascript：

var t;
    var start = $('#myCarousel .carousel-inner .item.active').data('interval');
    console.log(start);
    t = setTimeout("$('#myCarousel').carousel({interval: 1000});", (start - 1000));
    $(".progress_bar .percentage").animate({'width':'100%'}, start);
    $(".progress_bar .percentage").animate({'width':'0%'}, 30);

    $('#myCarousel').on('slid.bs.carousel', function () {
      clearTimeout(t);
      var duration =$('#myCarousel .carousel-inner .item.active').data('interval');
      console.log(duration);
      $('#myCarousel').carousel('pause');
      t = setTimeout("$('#myCarousel').carousel();", (duration - 1000));
      $(".progress_bar .percentage").animate({'width':'100%'}, duration);
      $(".progress_bar .percentage").animate({'width':'0%'}, 30);
    });

    $('.carousel-control.right').on('click', function(){
      clearTimeout(t);
    });

    $('.carousel-control.left').on('click', function(){
      clearTimeout(t);
    });