Owl 使用更高版本 jQuery 的 Carousel 返回错误

Question

我正在尝试在我的 website.I 中安装 Owl Carousel 2 已为 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">

添加了以下函数来调用 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');
    })

添加了以下 HTML 代码

<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>

但仍然面临以下问题

而且我不知道为什么会返回此错误。

Answer 1

在这里，工作 fiddle 演示。如你所愿。

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

Owl 使用更高版本 jQuery 的 Carousel 返回错误

Owl Carousel returning errors with higher version of jQuery

html

jquery

owl-carousel

owl-carousel-2