picture counter and progress bar There is a slider with a counter, when the lower progress bar is turned on, the counter stops working. onTranslated: counter, onTranslated: moved

Either one works or the other how to combine the function, something I do not catch up)) thanks

$(".top-bg .slides-block .owl-carousel").owlCarousel({ items: 1, animateOut: 'fadeOut', dots: false, nav: false, mouseDrag: false, smartSpeed: 400, autoplay: true, autoplayTimeout: 4000, onInitialized : counter, onTranslated : counter, afterInit : progressBar, onTranslated : moved, startDragging : pauseOnDragging }); function counter(event) { var element = event.target; // DOM element, in this example .owl-carousel var items = event.item.count; // Number of items var item = event.item.index + 1; // Position of the current item $('.top-bg .slides-block #counter').html("<span class='item'>"+item+"</span> <span>/</span> <span class='items'>"+items+"</span>"); function moved(){ clearTimeout(tick); start(); }
  • It is advisable to attach a valid code, for this there is a snippet or use codepen \ jsfiddle - Nilsan
  • Yes, so clearly explained, it acts onTranslated twice in the slider options, either one or the other works. how to combine two functions ask or solve a problem - Anario 2:47 pm
  • And so incomprehensible. An example should reproduce your mistake and another person can poke and do something. And so only those who have encountered such a problem will help you, otherwise it will be a finger pointing at the sky. - Nilsan 1:59 pm

1 answer 1

 function counter(event) { var element = event.target; // DOM element, in this example .owl-carousel var items = event.item.count; // Number of items var item = event.item.index + 1; // Position of the current item $('.top-bg .slides-block #counter').html("<span class='item'>" + item + "</span> < span > /</span > < span class = 'items' > "+items+" < /span>"); clearTimeout(tick); start(); }