Обратный отсчет FlipClock не работает в owl-carousel / slider, но значения меняются каждый раз, когда я обновляю - PullRequest
Новая
       37

Обратный отсчет FlipClock не работает в owl-carousel / slider, но значения меняются каждый раз, когда я обновляю

0 голосов
/ 26 апреля 2019

Я разрабатываю веб-сайт для события, и мне нужно использовать таймер обратного отсчета на домашней странице, чтобы отобразить время, оставшееся до начала события. Для этого я использую обратный отсчет FlipClock.Обратный отсчет не меняет значение, когда я включаю обратный отсчет в сову-карусель. Я пробовал другой отсчет, и он также не работает в этой области.Однако оба таймера работают в других разделах, кроме карусели.

Я думаю, что проблема здесь с каруселью.Он не позволяет мне запускать какие-либо процессы в реальном времени или добавлять в них динамические HTML-элементы. 

$(document).ready(function($) {
  $(function() {
    FlipClock.Lang.Custom = {
      days: 'Days',
      hours: 'Hours',
      minutes: 'Minutes',
      seconds: 'Seconds'
    };
    var opts = {
      clockFace: 'DailyCounter',
      countdown: true,
      language: 'Custom'
    };
    var countdown = 1556377740 - ((new Date().getTime()) / 1000); // from: 04/27/2019 08:39 pm +0530
    countdown = Math.max(1, countdown);
    $('.clock-builder-output').FlipClock(countdown, opts);
  });

})
body .flip-clock-wrapper ul li a div div.inn,
body .flip-clock-small-wrapper ul li a div div.inn {
  color: #CCCCCC;
  background-color: #333333;
}

body .flip-clock-dot,
body .flip-clock-small-wrapper .flip-clock-dot {
  background: #323434;
}

body .flip-clock-wrapper .flip-clock-meridium a,
body .flip-clock-small-wrapper .flip-clock-meridium a {
  color: #323434;
}
<div class="welcome-slides owl-carousel">
  <!-- Single Slide -->
  <div class="single-welcome-slide bg-img bg-overlay jarallax" style="background-image: url(img/bg-img/1.jpg);">
    <div class="container h-100">
      <div class="row h-100 align-items-center">
        <!-- Welcome Text -->
        <div class="col-12">
          <div class="welcome-text text-right">


            <h2 data-animation="fadeInUp" data-delay="300ms">Myriad <br>XM Anomaly</h2>
            <h6 data-animation="fadeInUp" data-delay="500ms">Colombo, Sri Lanka</h6>


          </div>

        </div>


        <div class="clock-builder-output"></div>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
        </script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" />


      </div>
    </div>

  </div>
...