javascript - 具有动态内容的 Owl Carousel - 上一个/下一个导航不起作用

Question

我正在使用 jquery owl carousel 插件向用户动态呈现 html 页面组件。

问题是如果拖动触发器设置为 false/禁用，则上一个/下一个导航和循环无法处理动态添加的内容。

代码如下:

选项

var owlcarousel_obj = {
                loop: true,
                nav: true,
                navContainer: "#cv-navigation",
                mouseDrag: false,
                touchDrag: false,
                pullDrag: false,
                dots: true,
                dotsEach: true, */
                navText: ['<span id="nav-arrow-left" class="nav-arrow inline-block"><i class="fa fa-chevron-left fa-lg"></i></span>', '<span id="nav-arrow-right" class="nav-arrow inline-block"><i class="fa fa-chevron-right fa-lg"></i></span>'],
                nestedItemSelector: "owl-item",
                responsive:{
                    0:{
                        items:1,
                    },
                    320:{
                        items:2,
                    },
                    480:{
                        items:3,
                    },
                    768:{
                        items:4,
                    },
                    1000:{
                        items:6,
                    }
                }
            };

初始化 Owl Carousel

var vartcarousel = $("#cv-contents");
vartcarousel.owlCarousel(owlcarousel_obj);

我添加了此自定义触发器，但仍然不起作用

$(".nav-arrow-left").on("click touch", function(){
    vartcarousel.trigger("next.owl.carousel");
}); 
$(".nav-arrow-right").on("click touch", function(){
    vartcarousel.trigger("prev.owl.carousel");
}); 

动态加载内容

$(".call-header").on("click touch", function(e){
    var comvars = $("#packagename-variations-group").html();
    vartcarousel.trigger("add.owl.carousel", comvars).trigger("refresh.owl.carousel");
    e.stopImmediatePropagation();
});

HTML

    <div id="cv-header" class="d-table">
        <span class="cv-header-text pull-left">Test</span>
        <span class="cv-close-box"><i class="fa fa-times fa-lg"></i></span>
        <div id="cv-navigation" class="pull-right d-tcell"></div>
        <div class='clear'></div>   
    </div>

    <div id="cv-contents" class="">
    </div>

如何解决这个问题？

Answer 1

owlCarouel 对象现在通过“data”jQuery 绑定(bind)器链接到对象，并使用它自己的 prev/next 方法，如下使用:

var varcaroulsedata = varcarousel.data('owlCarousel');
$(".nav-arrow-left").on("click touch", function(){
    varcaroulsedata.prev();
}); 
$(".nav-arrow-right").on("click touch", function(){
    varcaroulsedata.next();
});