Как добавить процент завершения Owl-Carousel-2 (%) в строку состояния (не progressBar)?
Прежде всего, речь идет не о «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)
}
});
пожалуйста, проверьте ручку - codepen.io/tsarkar/pen/NmpGmV
Наконец-то у меня есть решение, пожалуйста, проверьте ручку - codepen.io/tsarkar/pen/NmpGmV
Ответы 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
Пожалуйста, проверьте это: codepen.io/gjk/pen/BpyYoj Соответствует ли это вашим требованиям?