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

Question

[z_u_q]

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

Answer 1

[0xD34F]

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

Comments

[z_u_q]

Спасибо, сработало!

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

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

Comments

[z_u_q]

Иван Сергеев Спасибо за ответ. Обновил, но поведение слайдера почему-то не вернулось

[Иван Сергеев]

тяжело сказать в чем причина, не видя сайт. чтобы сработал owl.trigger('refresh.owl.carousel'); слайдер должен быть инициализирован именно таким образом:

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

т.е. в переменной owl должен быть экземпляр класса слайдера, у вас так сейчас?

[Иван Сергеев]

нужно обернуть в событие document ready :

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

[z_u_q]

Иван Сергеев, Оно ведь обернуто в $(function() {...}), это то же самое вроде. Попробовал обернуть в $(document).ready(function() {}) результат такой же