如何在owl carousel 2中从左到右启动进度条动画

Question

我正在使用带有进度条的 Owl carosual2。我参考这个问题

How to create progress bar for Owl Carousel 2? 并且接受的答案有效。

我的代码在这里。

现在我正在做的是，我不想 100% 显示进度条。我必须显示一个中心对齐的 50% 进度条。我试过了，但是进度条动画有一些问题。它向左和向右。我希望它从左边开始并在右边结束。

我得到了输出

Answer 1

您可以使用父 div 设计进度条。请全屏查看演示。

//Init the carousel
initSlider();

function initSlider() {
  $(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    onInitialized: startProgressBar,
    onTranslate: resetProgressBar,
    onTranslated: startProgressBar
  });
}

function startProgressBar() {
  // apply keyframe animation
  $(".slide-progress").css({
    width: "100%",
    transition: "width 5000ms"
  });
}

function resetProgressBar() {
  $(".slide-progress").css({
    width: 0,
    transition: "width 0s"
  });
}

.owl-demo .item img {
  display: block;
  width: 100%;
  height: auto;
}

.slide-progress {
  width: 0;
  max-width: 100%;
  height: 4px;
  background: #7fc242;
}
.slide-progress-main{
  float:none;
  margin:30px auto;
  width:50%
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>

<div class="container">
  <div class="owl-demo">
    <div class="slide-progress-main">
      <div class="slide-progress"></div>
    </div>
    <div class="owl-carousel owl-theme">
      <div class="item">
        <img src="http://placehold.it/850x350" alt="slide">
      </div>
      <div class="item">
        <img src="http://placehold.it/850x350" alt="slide">
      </div>
      <div class="item">
        <img src="http://placehold.it/850x350" alt="slide">
      </div>
    </div>
  </div>
</div>