Owl Carousel returning errors with higher version of jQuery

Question

I'm trying to install Owl Carousel 2 in my website.I have added following files for owl-carousel.

<script src="~/Scripts/jquery-3.1.1.min.js" defer></script>
<script src="~/Scripts/js/owl-carousel.js"defer></script>
<link rel="stylesheet" href="~/Content/css/owl.carousel.css">

Added following function to call Jquery

$(".owl-demo").owlCarousel({
        items: 2,
        itemsDesktop: [1199, 2],
        itemsDesktopSmall: [979, 3],
        pagination: false,
        rewindNav: false,
        slideBy: 2,
        scrollPerPage: true,
        afterAction: function () {
            if (this.itemsAmount > this.visibleItems.length) {
                $('.next').show();
                $('.prev').show();

                $('.next').removeClass('disabled');
                $('.prev').removeClass('disabled');
                if (this.currentItem == 0) {
                    $('.prev').addClass('disabled');
                }
                if (this.currentItem == this.maximumItem) {
                    $('.next').addClass('disabled');
                }
            } else {
                $('.next').hide();
                $('.prev').hide();
            }
        }
    });

    $(".next").click(function () {
        $(".owl-demo").trigger('owl.next');
    })
    $(".prev").click(function () {
        $(".owl-demo").trigger('owl.prev');
    })

Added following HTML code

<div class="carousel">
                            <div class="owl-demo owl-carousel">
                                <div class="item">
                                    <img src="~/Images/slider-img.png" />
                                    <div class="img-title">text will come here</div>
                                </div>
                                <div class="item">
                                    <img src="~/Images/slider-img.png" />
                                    <div class="img-title">text will come here</div>
                                </div>
                                <div class="item">
                                    <img src="~/Images/slider-img.png" />
                                    <div class="img-title">text will come here</div>
                                </div>
                                <div class="item">
                                    <img src="~/Images/slider-img.png" />
                                    <div class="img-title">text will come here</div>
                                </div>
                            </div>

                            <div class="customNavigation">
                                <a id="customnavi1" class="btn prev">
                                    <img src="~/lib/images/BackButtonBlack.PNG" />
                                </a>
                                <a id="customnavi2" class="btn next">
                                    <img src="~/lib/images/NextArrowBlack.PNG" />
                                </a>
                            </div>
                        </div>

But still facing follwing issue

And I have no idea why it's returning this error.

Answer 1

Here, working fiddle demo. As you wanted.

$(".next").click(function () {
    $(".owl-next").trigger('click');
})
$(".prev").click(function () {
     $(".owl-prev").trigger('click');
});