owl carousel 2中如何开始从左到右的进度条动画

Question

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

接受的答案有效。

我的代码在这里。

现在我做的是，我不想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>

owl carousel 2中如何开始从左到右的进度条动画

How to start the progress bar animation from left to right in owl carousel 2

html

css

jquery

owl-carousel

owl-carousel-2