title: How to add Owl-Carousel-2 completeness percent(%) status bar(not progressBar)?
body: <p>First of all this is not about &quot;progressBar&quot;, I need a completeness percent(%) status bar for owlCarousel-2, if there is any confusion in my question and description then please check the images below.</p>
  <p>I have just created a pen, please check the link - <a href="https://codepen.io/tsarkar/pen/NmpGmV" rel="nofollow noreferrer">https://codepen.io/tsarkar/pen/NmpGmV</a></p>
  <p><img src="https://www.testyourprojects.biz/html/slimimag/html/assets/images/img-1.png" alt="a busy cat" /></p>
  <p><a href="https://i.stack.imgur.com/oQUVn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oQUVn.png" alt="a busy cat" /></a><br />
  <sub>(source: <a href="https://www.testyourprojects.biz/html/slimimag/html/assets/images/img-2.png" rel="nofollow noreferrer">testyourprojects.biz</a>)</sub></p>
  <p>I just have complete with &quot;Total Item count&quot; and &quot;Current item count&quot;, but can't implement the status(%) bar like the images I have posted. Please check my code below.</p>
  <pre><code>$(function(){
  var owl = $('.ivySlide');
  $('.ivySlide').owlCarousel({
    smartSpeed: 500,
    items: 1,
    margin:0,
    nav:true,
    dots:false,
    onInitialized:counter,
    onTranslated:counter
  });
  function counter(event) {
    var element = event.target;
    var items = event.item.count;
    var item = event.item.index + 1;
    var sldtxt = $('.active .ivySlideTxt').html();
    $('#counter').html(item+&quot; / &quot;+items)
  }
  });
  </code></pre>