How to catch the transfer of the active class?

Question

Owl Carousel

<div class="owl-controls clickable">
  <div class="owl-pagination">
    <div class="owl-page"><span class=""></span></div>
    <div class="owl-page"><span class=""></span></div>
    <div class="owl-page active"><span class=""></span></div>
    <div class="owl-page"><span class=""></span></div>
    <div class="owl-page"><span class=""></span></div>
  </div>
</div>

This code is embedded by the carousel itself. In a good way, I need to make a counter like 1/5.
Rough and clumsy it can be done like this

var owlPage = $(".owl-page");

    $(function(){
        $(".owl-page-altogether").html($(owlPage).length);
    })

    var owlPageIndexNumber = $('.owl-pagination .owl-page').index($('.owl-page.active')) + 1;

    $(".owl-page-index-number").text(owlPageIndexNumber);

<p class="b-owl__navigation__el-count-mod-house">
  <span class="owl-page-index-number"></span>/<span class="owl-page-altogether"></span>
</p>

It remains only to catch and change the "owl-page-index-number" on click on the carousel navigation. I understand that through addEventListner, but then what?

Answer 1

Well, how would