Search code examples
jqueryowl-carousel

How to remove 0 before 10 in owl carousal?


I have created an Owl carousel with fraction pagination count "01 / 010". I just need to remove the number 0 before 10 when the total slide number is greater than 9, otherwise, it will remain the same as it.

$(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("0"+item+" / 0"+items);
  $('.slTxt').html(sldtxt);
  $('.slideState span').css("width", sldPercent + "%");
  $('.slideState span').html(sldPercent + "%")
}
});

Please check the link here - https://codepen.io/tsarkar/pen/NmpGmV


Solution

  • You can check if item and items are less than 10 or not and prefix 0 accordinlgy

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