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
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 + "%")
}
});