Как запустить анимацию индикатора выполнения слева направо в сове-карусели 2 - PullRequest
Новая
       8

Как запустить анимацию индикатора выполнения слева направо в сове-карусели 2

0 голосов
/ 21 февраля 2020

Я использую Owl carosual2 с индикатором выполнения. Я задаю этот вопрос

Как создать индикатор выполнения для Owl Carousel 2? , и принятый ответ работает.

Мой код здесь.

Теперь я не хочу отображать индикатор выполнения на 100%. Я должен отобразить индикатор прогресса 50% с выравниванием по центру. Я пытался, но есть некоторые проблемы с анимацией индикатора выполнения. Это идет влево и вправо. Я хочу, чтобы он начинался слева и заканчивался справа.

Я получаю вывод

enter image description here

1 Ответ

1 голос
/ 21 февраля 2020

Вы можете создать индикатор выполнения, используя родительский 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>
...