Как добавить строку состояния процента (%) Owl-Carousel-2 (не progressBar)?

Question

Прежде всего, это не про "progressBar", мне нужна строка состояния процента (%) полноты для owlCarousel-2, если в моем вопросе и описании есть какая-то путаница, тогда, пожалуйста, проверьте изображения ниже.

Я только что создал ручку, пожалуйста, проверьте ссылку - 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