@zahar_92

Как запустить слайдер на элементах полученных через ajax?

Есть 4 таба, в каждом набор div, которые загружаются через ajax. Первый (активный таб) загружается при загрузке страницы, тут все ок. Второй и следующие подгружают контент один раз при клике на заголовок таба. Все это происходит в битриксе. Слайдер slick, но тут не принципиально.
Цель: инициализировать слайдер после получения элементов через ajax. Как отследить, что элементы загрузились и в этот момент запустить слайдер?

Примерный код такой
<ul class="tabs ajax">
	<li data-code="NEW" class="active"><span>Новинка</span></li>
	<li data-code="STOCK"><span>Акция</span></li>
	<li data-code="HIT"><span>Хит</span></li>
</ul>

<ul class="tabs_content">
	<li class="tab NEW_wrapp" data-code="NEW">
		<div class="catalog_block ajax_load active">
			<div>Товар 1</div>
			<div>Товар 2</div>
			<div>Товар 3</div>
		</div>
	</li>
	<li class="tab STOCK_wrapp" data-code="STOCK">
		<div class="catalog_block">
			До ajax запроса тут пустота
		</div>
	</li>
	<li class="tab HIT_wrapp" data-code="HIT">
		<div class="catalog_block">
			До ajax запроса тут пустота
		</div>
	</li>
</ul>

$(document).ready(function(){
	$(elem).slick({
		infinite: false,
		slidesToShow: 5,
		slidesToScroll: 1
	});
});
  • Вопрос задан
  • 134 просмотра
Пригласить эксперта
Ответы на вопрос 1
zkrvndm
@zkrvndm
Архитектор решений
Для отслеживания изменений в html коде страницы Вам необходимо использовать MutationObserve.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы