Minimal Event Countdown Timer Plugin - jQuery Multi Countdown

A minimal and simple jQuery countdown plugin that displays how many days/hours/minutes/seconds left until your next event like meetings, schedules, special offers, etc.

Also comes with a Timer mode that allows you to countdown to a specific time.

How to use it:

1. To begin with, load the main JavaScript multi-countdown.js after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/multi-countdown.js"></script>

2. Create a basic countdown, determine the date you'd like to countdown towards to, and specify the text to display when the countdown is ended.

<div data-Date='2020/12/24 23:59:59' data-endText="Offer ended">
  (days) p_days, (hours) p_hours, and (minutes) p_minutes left!
</div>

// output
200 Days, 05 Hours, and 49 Minutes left!

3. Create a digital countdown clock with the following HTML markups.

<div data-Date='2020/12/24 23:59:59'>
  <h2 class="text-center">Special Offer</h2>
  <div class="running">
    <timer>
      <span class="days"></span>:<span class="hours"></span>:<span class="minutes"></span>:<span class="seconds"></span>
    </timer>
    <div class="labels"><span>Days</span><span>Hours</span><span>Minutes</span><span>Seconds</span></div>
    <div class="text">Offer Ended</div>
    <button>Buy Now!</button>
  </div>
  <div class="ended">
    <div class="text">Offer is ended</div>
    <button>Suscribe for next event!</button>
  </div>
</div>

4. You're also allowed to create a countdown timer by defining a fixed time in the data-fixTime.

<div data-fixTime='{"Days": "3", "Hours": "2", "Minutes": "10"}' data-endText="Offer ended">
  (days) p_days, (hours) p_hours, (minutes) p_minutes and (seconds) p_seconds left!
</div>

// output
03 Days, 01 Hour, 48 Minutes and 58 Seconds left!

5. Create a countdown timer with configurable Zero Padding.

<div data-fixTime='{"Days": "3", "Hours": "1", "Minutes": "10"}' data-endText="Offer ended" data-zeroPad='{"Days": "false"}'>
  (days) p_days - (hours):(minutes):(seconds) left!
</div>

// output
3 Days - 00:46:47 left!

---

This awesome jQuery plugin is developed by pablog1. For more Advanced Usages, please check the demo page or visit the official website.