具有动态内容的猫头鹰轮播 - 上一个/下一个导航不起作用

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

如果将Drag触发器设置为false / disabled,则问题是Prev / Next导航和循环无法使用动态添加的内容 .

这是代码:

Options

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,
                    }
                }
            };

initialize owl carousel

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

I added this custom trigger, but still not working

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

Load contents dynamically

$(".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>

如何解决这个问题呢?

回答(1)

2 years ago

现在,owlCarouel对象使用“data”jQuery Binders 链接到对象,并使用自己的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();
});