Question

我试图在我的网站上安装猫头鹰Carousel。我为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 Carousel使用更高版本的jQuery返回错误

1 个答案: