Estou tentando fazer com um formato de paginação com o owl carousel, fiz conforme esta resposta, mas não consegui fazer passar disso.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<style type="text/css">
.num{
background:#000;
color:#fff;
padding:10px;
width:50px;
text-align:center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="container-fluid p-0">
<div class="row no-gutters">
<div class="col-12">
<div class="owl-carousel owl-theme">
<div class="item" data-dot="<button>01</button>">
<img src="https://picsum.photos/1920/800/?random">
</div>
<div class="item" data-dot="<button>02</button>">
<img src="https://picsum.photos/1920/800/?random">
</div>
<div class="item" data-dot="<button>02</button>">
<img src="https://picsum.photos/1920/800/?random">
</div>
<div class="item" data-dot="<button>02</button>">
<img src="https://picsum.photos/1920/800/?random">
</div>
<div class="item" data-dot="<button>02</button>">
<img src="https://picsum.photos/1920/800/?random">
</div>
</div>
<div class="num"></div>
</div>
</div>
</div>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop:true,
autoplay:true,
autoplayTimeout:5000,
margin:0,
nav:true,
dots: false,
mouseDrag: false,
items:1
});
var items = $('.owl-item').length;
var cloned = $('.owl-item.cloned').length;
var totalItems = items - cloned;
var currentIndex = $('div.active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');
</script>