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

【问题标题】：Owl Carousel With Dynamic Content - Prev/Next Navigation Not Working具有动态内容的猫头鹰轮播 - 上一个/下一个导航不起作用
【发布时间】：2016-04-11 10:45:25
【问题描述】：

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

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

代码如下：

选项

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

初始化猫头鹰轮播

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>

如何解决这个问题？

【问题讨论】：

我遇到了类似的 owl carousel 问题，当你说不工作时，你是什么意思？
@Satej S 它不想滑动，我进行了调试，它具有属性 transition 的内联样式，其值之一是 NaNs 并且没有 transform 属性，不像 if内容在页面加载时填充。
是否可以提供 JSFiddle 或 Plunkr？
对不起，我什至不能让它在小提琴上工作。 jsfiddle.net/6eyznb2g

标签： javascript jquery owl-carousel

【解决方案1】：

owlCarouel 对象现在通过“数据”jQuery binder 链接到对象，并使用自己的 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();
});

【讨论】：