owl carousel not showing pagination number in my product slider

Question

I have 15 products in my owl carousel slider and each slider has 5 products so I want to show the pagination number on each slide when click on next or previous pagination number should change but I do not know where I have to chage

I want pagination like below picture

Here is my code

$("#hottest-selling-items .owl-carousel").owlCarousel({
                    autoplay: false,
                    autoplayTimeout: 5000,
                    /*autoplayHoverPause: true,*/
                    margin: 0,
                    slideBy: 5,
                    nav: true,
                    navText: ["<em class='porto-icon-left-open-big'></em>","<em class='porto-icon-right-open-big'></em>"],
                    dots: true,
                    loop: false,
                    responsive: {
                        0: {
                            items:2
                        },
                        640: {
                            items:3
                        },
                        768: {
                            items:4
                        },
                        992: {
                            items:5
                        },
                        1200: {
                            items:5
                        }
                    }
                });

Answer 1

HTML:

<div class="" id="hottestSellingCount"></div>

jQuery:

$("#hottest-selling-items .owl-carousel").owlCarousel({
autoplay: false,
autoplayTimeout: 5000,
/*autoplayHoverPause: true,*/
margin: 0,
slideBy: 5,
nav: true,
navText: ["<em class='porto-icon-left-open-big'></em>", "<em class='porto-icon-right-open-big'></em>"],
dots: true,
loop: false,
responsive: {
    0: {
        items: 2
    },
    640: {
        items: 3
    },
    768: {
        items: 4
    },
    992: {
        items: 5
    },
    1200: {
        items: 5
    }
},
onInitialized: counter, //When the plugin has initialized.
onTranslated: counter // When the translation of the stage has finished.
});
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

// it loop is true then reset counter from 1
if (item > items) {
    item = item - items
}
$('#hottestSellingCount').html(item + "of" + items)

}