0

我正在为一个活动开发一个网站，我需要在主页中使用倒数计时器来显示距离活动开始的剩余时间。为此，我正在使用 FlipClock 倒计时。当我将倒计时包含在 owl-carousel 中时，倒计时不会改变值。我尝试了另一个倒计时，但它也不适用于该区域。然而，除了轮播之外，这两个计时器都可以在其他 div 部分中使用。

我认为这里的问题在于轮播。它不允许我运行任何实时进程或向其中添加任何动态 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>

4

0 回答 0