How To Use Owl Carousel With Item Number Counter

HTML

<div class="section">
    <div class="container">
        <div class="slider owl-carousel owl-theme">
            <div class="slider-item">
                <h1>1</h1>
            </div>
            <div class="slider-item">
                <h1>2</h1>
            </div>
            <div class="slider-item">
                <h1>3</h1>
            </div>
            <div class="slider-item">
                <h1>4</h1>
            </div>
        </div>
        <div class="slider-counter"></div>
    </div>
</div>

CSS

.slider-item {
    background-color: #ff0000;
    padding: 40px;
    text-align: center;
    h1 {
        color: #ffffff;
        font-size: 80px;
    }
}
.slider-counter {
    color: #008000;
    font-size: 80px;
    position: relative;
    top: 30px;
    text-align: center;
}

JS

$(".slider")
       .on("initialized.owl.carousel changed.owl.carousel", function (e) {
           if (!e.namespace) {
           return;
           }
           var carousel = e.relatedTarget;
           $(".slider-counter").text(
           carousel.relative(carousel.current()) + 1 + "/" + carousel.items().length
       );
   })
   .owlCarousel({
       loop:true,
       nav:true,
       margin:30,
       dots:true,
       items:4,
   });