How to reinitialize Owl Carousel after ajax call?

Question

I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the vi

Answer 1

As per your code I make changes please apply this I hope this code work full.

success: function(result) {            
            $('#demo').html('<div id="testing" class="owl-carousel"></div>');
            for(var i=0;i<result.length;i++){
                $(".owl-carousel").append('<div class="item"><img src="/img/sub_category/'+result[i].subcategory_img+'" /></div>');
            };
            var owl = $("#testing");
            owl.owlCarousel({
                items: 4,
                navigation: true
            });

Answer 2

Nothing above worked for me only this worked :

$('.owl-gallery').data('owlCarousel').destroy();
$('.owl-gallery').owlCarousel(options);

Answer 3

This was my approach and it works with the version 2.2.1 :

$.getJSON('testimonials.json', function(data) {

    var content = "";
        for(var i in data["items"]){

             var text = data["items"][i].text;
             var name = data["items"][i].name;
             var position = data["items"][i].position;

             content += text + name + position
        }

        // set the content inside the element
        $("#test_slider").html(content);

        // Now we can call the owlCarousel
        $('#test_slider').owlCarousel({
            dots: false,
            nav: true,
            loop: true,
            margin:30,
            smartSpeed: 700,
            items:1,
            autoplay:true,
        });
});

As for testimonials.json looks like this :

{
  "items" :
  [
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
      "name": "Maurice Pittmansss",
      "position": "CEO of ABS Ltd.1"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
      "name": "Maurice Pittmanggg",
      "position": "CEO of ABS Ltd.2"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
      "name": "Maurice Pittmannnn",
      "position": "CEO of ABS Ltd3."
    }
  ]
}

Answer 4

I believe you will need to destroy and re-initalize the carousel. There is a destroy method you can call;

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1391

or there is a refresh method;

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L608

or there is an update method;

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L569

I believe these can all be called;

$('.owl-gallery').owlCarousel('refresh');

Might be worth a try.