Как правильно отобразить слайды,если выполняется ajax запрос owl carousel?

Question

z_u_q @z_u_q

Owl Carousel

Как правильно отобразить слайды,если выполняется ajax запрос 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 отдает мне:

<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>

Собственно вопрос, как вернуть поведение слайдера? Тут я сделал просто вставку в .owl-carousel $('.owl-carousel').html(response);

Вопрос задан более трёх лет назад
774 просмотра

Комментировать

Подписаться 1 Средний Комментировать

Answer 1 · 2019-03-25 14:08:16

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);
});

или же инициализировать слайдер $('.owl-carousel').owlCarousel(); только при успешном запросе ajax, а не ДО него

Как правильно отобразить слайды,если выполняется ajax запрос owl carousel?

Войдите на сайт