CODEWITHSUNDEEP
javascriptjquerycountdownowl-carouselflipclock
Lahiru Udayanga
Lahiru Udayanga

Reputation: 369

FlipClock countdown does not work in owl-carousel/ slider but the values get changed every time I refresh

I'm developing a website for a event and I need to use a countdown timer in the homepage to display the time left until the start of the event.For that I am using FlipClock countdown. The countdown doesn't change the value when I include the countdown in the owl-carousel.I have tried another countdown and it does not work on this area too. However both the timers work in the other div sections except carousel.

I think the problem here is with the carousel. It does not let me to run any real time process or add any dynamic html elements to it.

$(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>

Upvotes: 0

Views: 763

Answers (0)

Related Questions