How to display the slides,if you are performing an ajax request owl carousel?

<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 a question how to return the behavior of the slider? Here I did a simple insert into .owl-carousel $('.owl-carousel').html(response);
March 19th 20 at 08:27
2 answers
March 19th 20 at 08:29
Solution
$(response).filter('.item').each(function() {
 $owl.trigger('add.owl.carousel', this);
});
$owl.trigger('refresh.owl.carousel');
Thank you, it worked! - Margarett.Monahan27 commented on March 19th 20 at 08:32
March 19th 20 at 08:31
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 to initialize the slider $('.owl-carousel').owlCarousel(); only when a successful ajax request, and not BEFORE
@Clementina_Kunde Thanks for the reply. Updated, but the behavior of the slider and somehow never returned - Margarett.Monahan27 commented on March 19th 20 at 08:34
it's hard to say why without seeing the site. to load owl.trigger('refresh.owl.carousel'); slider needs to be initialized that way:
owl = $('.owl-carousel');
owl.owlCarousel();

i.e. in a variable, owl must be an instance of class slider you have now? - Clementina_Kunde commented on March 19th 20 at 08:37
you need to wrap in a document ready event :
$(document).ready(function() {
 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);
});
 });
- Clementina_Kunde commented on March 19th 20 at 08:40
@Clementina_Kunde, It's wrapped in $(function () { ... }) is the same kind. Tried wrapping in $(document).ready(function() {}) the result is the same - Margarett.Monahan27 commented on March 19th 20 at 08:43

Find more questions by tags Owl CarouseljQueryAJAX