title: How to reinitialize Owl Carousel after an ajax call?
body: <p>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 view (the carousel structure) will not reinitialize. Everything is fine upon page load. </p>
  
  <p>I'm using version 1.3.3</p>
  
  <pre><code>$(document).ready(function() {
   $(".owl-carousel").owlCarousel({
     items : 3
   });
  });
  </code></pre>
  
  <p>Ajax call</p>
  
  <pre><code>$.ajax({
      type: 'get',
      url: '/public/index',
      dataType: 'script',
      data: data_send,
        success: function(data) {
         $(".owl-carousel").owlCarousel({
           items: 3
         });
        }
     });
  }
  </code></pre>
  
  <p>Am I missing something that I need to do? I have looked at this issue on the github page and tried the suggestions but to no avail.</p>
  
  <h2>Edit</h2>
  
  <p>From the advice given, I have created these two functions</p>
  
  <pre><code>function owlCarousel() {
    var owl = $(".owl-carousel"); 
    //init carousel
    owl.owlCarousel();
      owl.data('owlCarousel').reinit({
       items : 3
      });
  }
  
  function destroyOwlCarousel() {
    var owl = $(".owl-carousel");
    //init carousel
    owl.owlCarousel();
      owl.data('owlCarousel').destroy();
    }
  }
  </code></pre>
  
  <p>It seems to work, but wondering if this is the correct way to be doing this?</p>