How to reinitialize Owl Carousel after an 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

I went through the same problem and tried reinit() method but it was not working for me, so I tried destroy and init again and it worked.

$.ajax({
    type: 'get',
    url: '/api/v1/companies',
    ...,
    success: function(data) {
        $("#main-company-carousel").data('owlCarousel').destroy();
        $("#main-company-carousel").owlCarousel({
            items : 3 
        });
    }
});

Answer 2

$('#owl-demo').data('owlCarousel').reinit();

Answer 3

This one works for me in version 2

var owl = $('#owl-carousel');
owl.trigger('destroy.owl.carousel');
owl.owlCarousel({
   items: 1,
});

Answer 4

Try $(window).load() instead of reinitialize

Answer 5

The example below works.

Initializing the carousel:

owl = $("#owl-demo");

owl.owlCarousel({
  items: 10,
  autoPlay: 1000,
});

And when you use the ajax callback, try:

owl.data('owlCarousel').destroy();

owl.owlCarousel({
  items: 5,
  autoPlay: 1000,
});

I create a fiddle to explain you how to re-initialize the carousel: http://jsfiddle.net/s10bgckL/959/

PS: I did not create an array of options just if you want to modify some parameters as speed, quantity of displayed items, etc.

I hope it helps.

Answer 6

This should help:

/*
 reinit() method reinitialize plugin 

 Syntax:
 owldata.reinit(newOptions)

 Yes! you can reinit plugin with new options. Old options
 will be overwritten if exist or added if new.

 You can easly add new content by ajax or change old options with reinit method.
 */

 $('.reinit').click(function(e){
 e.preventDefault()
 if(booleanValue === true){
  booleanValue = false;
  } else if(booleanValue === false){
  booleanValue = true;
}

owl.data('owlCarousel').reinit({
    singleItem : booleanValue
  });
})