Owl Carousel With Dynamic Content - Prev/Next Navigation Not Working

Question

I am using jquery owl carousel plugin to dynamically present html page components to the users.

The problem is the Prev/Next navigation and loop not working with dynamically added contents if the Drag triggers are set to false/ disabled.

Here is the codes:

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>

How to solve this problem?

Answer 1

The owlCarouel object is now linked to the object with the "data" jQuery binder, and uses its own prev / next methods, use it like that :

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