我正在使用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 回答
现在,owlCarouel对象使用“data”jQuery Binders 链接到对象,并使用自己的prev / next方法,使用它: