Как в Owl-carousel сделать полосу прогресса пагинации и отображения номера слайда?

[Tempest]

Как осуществить полосу прогресса пролистывания слайдов и отображение номера текущего слайда из общего числа слайдов?

Сам сайт http://ilyin1ib.beget.tech/
Весь код jsfiddle.net/fs34kmz0/

Код слайда

<section class="spaces">
        <div class="wrapper">
            <div class="content">
                <div class="spaces-title">
                    <h3>Our Spaces</h3>
                    <p>Our space is designed to give you a different experience when working with your team or personally</p>
                    <div class="plug"></div>
                </div>
                <div class="spaces-gal owl-carousel">
                    <div class="spaces-slide one">
                        <h4>Private Space</h4>
                        <p>Comfortable space, Full speed wifi, Free coffe & Snack<br>and many more</p>
                        <div class="details">
                            <span>Check avaibility</span><i class='fas fa-chevron-right'></i>
                        </div>
                    </div>
                    <div class="spaces-slide two">
                        <img src="img/space-2.jpg" alt="2">
                        <span>Custom Office</span>
                        <div class="details">
                            <span>Check avaibility</span><i class='fas fa-chevron-right'></i>
                        </div>
                    </div>
                    <div class="spaces-slide three">
                        <img src="img/space-3.jpg" alt="3">
                        <div class="details">
                            <span>Check avaibility</span><i class='fas fa-chevron-right'></i>
                        </div>
                        <span>Problem solving</span>
                    </div>
                    <div class="spaces-slide four">
                        <img src="img/space-4.jpg" alt="4">
                        <div class="details">
                            <span>Check avaibility</span><i class='fas fa-chevron-right'></i>
                        </div>
                        <span>Working with team</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

$(".spaces-gal.owl-carousel").owlCarousel({
        autoplay: false,
        slideSpeed: 9000,
        items: 3,
        autoHeight: true,
        loop: true,
        nav: true,
        navText: ["<i class='fas fa-arrow-left'></i>", "<i class='fas fa-arrow-right'></i>"],
        center: true,
        dots: false,
        responsiveClass: true,
        smartSpeed: 400,
        margin: 30,
        responsive: {
            0: {
                items: 1,
                margin: 0,
                dots: false,
                nav: true
            },
            768: {}
        }
    });