如何添加 Owl-Carousel-2 completeness percent(%) 状态栏（不是 progressBar）？

Question

首先这不是关于“progressBar”，我需要 owlCarousel-2 的完整性百分比 (%) 状态栏，如果我的问题和描述有任何混淆，请检查下面的图片。

我刚刚创建了一支笔，请检查link - https://codepen.io/tsarkar/pen/NmpGmV

我刚刚完成了“总项目数”和“当前项目数”，但无法像我发布的图片那样实现状态 (%) 栏。请检查下面我的代码。

$(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+" / "+items)
}
});

Answer 1

终于找到解决方案了，请检查下面的代码和笔。

$(function(){
$('.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();
  var sldWidth = 100;
  var sldPercent = sldWidth * item / items;
  $('#counter').html(item+" / "+items)
  $('.slTxt').html(sldtxt);
  $('.slideState span').css("width", sldPercent + "%");
  $('.slideState span').html(sldPercent + "%")
}
});

你可以在这里查看我的解决方案https://codepen.io/tsarkar/pen/NmpGmV

如何添加 Owl-Carousel-2 completeness percent(%) 状态栏（不是 progressBar）？

How to add Owl-Carousel-2 completeness percent(%) status bar(not progressBar)?

html

css

jquery

owl-carousel