How to display slides correctly if an owl carousel ajax request is made?

Question

JavaScript

<div class="carousel-wrap">
  <div class="owl-carousel">
      
  </div>
</div>

$(function() {
     $('.owl-carousel').owlCarousel();
});

$.ajax('/test.php').done(function (response) {
  if (typeof response === 'string' && response.length > 0) {
    $('.owl-carousel').html(response);
  } else {
    console.log(response);
  }
}).fail(function (jqXHR, textStatus, errorThrown) {
  console.log(textStatus);
  console.log(errorThrown);
});

test.php gives me:

<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>

Actually the question is how to return the behavior of the slider? Here I just made an insert into .owl-carousel $('.owl-carousel').html(response);

Answer 1

$(response).filter('.item').each(function() {
  $owl.trigger('add.owl.carousel', this);
});
$owl.trigger('refresh.owl.carousel');

Answer 2

var owl = $('.owl-carousel');
owl.owlCarousel();

$.ajax('/test.php').done(function (response) {
  if (typeof response === 'string' && response.length > 0) {
    $('.owl-carousel').html(response);
    owl.trigger('refresh.owl.carousel');
  } else {
    console.log(response);
  }
}).fail(function (jqXHR, textStatus, errorThrown) {
  console.log(textStatus);
  console.log(errorThrown);
});

or else initialize the slider only on successful ajax request, not BEFORE it $('.owl-carousel').owlCarousel();