Owl carousel items are not working when appended dynamically using Ajax and jQuery on button click

Question

I'm trying to bind images in owl carousel using jQuery and ajax call using a button click event where we need to show all images with owl carousel slide but after clicking it's binding div contents but carousel is not working.

Even Carousel not working and also not showing items.

Any help will be appreciated.. Thanks in advance.

I had also tried this after binding to reload carousel but didn't work.

            var owl = $("#myCarousel");
            owl.owlCarousel({
                items: 4,
                itemsDesktop: [1199, 3],
                itemsDesktopSmall: [980, 2],
                itemsMobile: [600, 1],
                navigation: true,
                navigationText: ["", ""],
                pagination: true,
                autoPlay: false
            });

Answer 1

You must re-Init carousel with all needed options.

var owl = $("#myCarousel");
var owlOptions = {
                items: 4,
                itemsDesktop: [1199, 3],
                itemsDesktopSmall: [980, 2],
                itemsMobile: [600, 1],
                navigation: true,
                navigationText: ["", ""],
                pagination: true,
                autoPlay: false
            }; //set options in variable
//Init when page (document) ready
owl.owlCarousel(owlOptions);

//Doing some ajax manipulations
//...bla bla
success: function() { 
  //...something heppened
  owl.owlCarousel(owlOptions); //ReInit with options
}