изображение совы-карусели не выделяет текущую позицию

Question

owl-carousel image не выделяет текущее изображение при перетаскивании влево или вправо. У меня есть три изображения, и когда я нажимаю на любое из них, я вижу активный класс на текущем изображении, когда я нажимаю на следующее изображение, активный класс переходит к следующему изображению, которое хорошо работает для меня, но проблема здесь в том, когда я перетащите изображение влево или вправо, активный класс не применяется. Любая помощь приветствуется.

/*owl-carousel script*/
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js

/*I used below code to have the active class move to the next element when clicked*/
$(document).ready(function() {					
        $(".owl-item").click(function (e) {
            e.preventDefault();
            if(!$(this).hasClass('active')){
                   $(".owl-item").removeClass("active");
                $(this).addClass("active");        
        }
        });             
    });

.owl-item.active img {
    border-bottom: 1px solid #000 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-wrapper-outer">
    <div class="owl-wrapper">
        <div class="owl-item">
            <div style="position: relative; overflow: hidden;">
                <img class="lazyOwl" src="https://www.handletheheat.com/wp-content/uploads/2015/03/Best-Birthday-Cake-with-milk-chocolate-buttercream-SQUARE.jpg" style="display: inline;">
                <div class="zoomOnImg" style="width: 400px; height: 400px; opacity: 0;">
                    <div class="zoom-1"></div><img src="https://www.handletheheat.com/wp-content/uploads/2015/03/Best-Birthday-Cake-with-milk-chocolate-buttercream-SQUARE.jpg">
                </div>
            </div>
        </div>
    </div>
    <div class="owl-item" style="width: 258px;">
        <div class="item">
            <div style="position: relative; overflow: hidden;">
                <img class="lazyOwl" src="https://www.handletheheat.com/wp-content/uploads/2015/03/Best-Birthday-Cake-with-milk-chocolate-buttercream-SQUARE.jpg" style="display: inline;">
                <div class="zoomOnImg" style="width: 400px; height: 400px; opacity: 0;">
                    <div class="zoom-1"></div><img src="https://www.handletheheat.com/wp-content/uploads/2015/03/Best-Birthday-Cake-with-milk-chocolate-buttercream-SQUARE.jpg">
                </div>
            </div>
        </div>
    </div>
    <div class="owl-item" style="width: 258px;">
        <div class="item">
            <div style="position: relative; overflow: hidden;">
                <img class="lazyOwl" src="https://www.handletheheat.com/wp-content/uploads/2015/03/Best-Birthday-Cake-with-milk-chocolate-buttercream-SQUARE.jpg" style="display: inline;">
                <div class="zoomOnImg" style="width: 400px; height: 400px; opacity: 0;">
                    <div class="zoom-1"></div><img src="https://www.handletheheat.com/wp-content/uploads/2015/03/Best-Birthday-Cake-with-milk-chocolate-buttercream-SQUARE.jpg">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="owl-wrapper-outer" style="padding: 0px;">
    <div class="owl-wrapper" style="width: 100%; left: 0px; display: block; padding: 0px; transition: all 200ms ease 0s; transform: translate3d(0px, 0px, 0px);">
        <div class="owl-item active" style="width: 32.4%;padding: 0px;">
            <a href="#" class="item"> <img class="lazyOwl" alt="" src="https://www.handletheheat.com/wp-content/uploads/2015/03/Best-Birthday-Cake-with-milk-chocolate-buttercream-SQUARE.jpg" style="display: inline;"></a>
        </div>
        <div class="owl-item " style="width: 32.4%; padding: 0px; ">
            <a href="#" class="item"> <img class="lazyOwl" alt="" src="https://www.handletheheat.com/wp-content/uploads/2015/03/Best-Birthday-Cake-with-milk-chocolate-buttercream-SQUARE.jpg" style="display: inline;"></a>
        </div>
        <div class="owl-item" style="width: 32.4%; padding: 0px; ">
            <a href="#" class="item"> <img class="lazyOwl" alt="" src="https://www.handletheheat.com/wp-content/uploads/2015/03/Best-Birthday-Cake-with-milk-chocolate-buttercream-SQUARE.jpg" style="display: inline;"></a>
        </div>
    </div>
</div>